CODEWITHSUNDEEP
csslayoutflexboxmultiple-columns
Sudeep
Sudeep

Reputation: 45

CSS dynamic two column layout

I need to create following layout using css

===== MOBILE ===== ===== ON DESKTOP ======

-----[1]-----                      -----[1]-----|-----[4]-----
-----[2]-----                      -----[2]-----|-----[5]-----
-----[3]-----                      -----[3]-----|-----[6]-----
-----[4]-----
-----[5]-----
-----[6]-----

===== MOBILE ==== ===== ON DESKTOP====

They above layout DOM structure will be as per the mobile layout order and also it is dynamic, if I removed [2] from the DOM [3] should take place of [2] not the [5]. How can I create a css layout with these condition is it possible to create with css?

Upvotes: 3

Views: 3477

Answers (1)

Terry
Terry

Reputation: 66228

You can CSS columns, which has been designed specifically for layout intentions like this.

CSS columns: http://jsfiddle.net/teddyrised/6bz4a0ox/

Use the following markup:

<div class="container">
    <div class="wrapper">
        <label for="">label</label>
        <input type="text" placeholder="[1]">
    </div>
    <!-- more -->
</div>

And for the CSS, we make sure that we declare both the column count (which is 2, as you have wanted) with a minimum column width. I actually would recommend doing this instead of targetting mobile vs desktop, as fluid/responsive layouts should be catered to the content, not the device:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container {
     -webkit-columns: 2 200px;
        -moz-columns: 2 200px;
             columns: 2 200px;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.wrapper {
  overflow: hidden;
  padding: .5em;
}
.wrapper label {
  float: left;
  width: 50px;
}
.wrapper label + input {
  float: left;
  width: calc(100% - 50px);
}

Upvotes: 3

Related Questions