Column based grid with flexbox

Question

This is my problem: I have different DIVs with all the same widths but different heights.

On a large viewport these DIVs should be arranged as a grid with two columns.
The margin between the DIVs should be equal (vertically and horizontally).
Since the DIVs should be displayed in one column with the correct order on mobile it is not possible to have its own parent elements for each column.

Here is an image of what I want to achieve: example

Is there any way to solve this with pure html/css?

The only solution I found so far is to use some kind of masonry javascript. But I feel like there must be a better solution...

What I've tried so far:

Using float/inline-block: I get perfect rows but 4 always starts at the same height as 3. So the margins are not equal. (See: https://codepen.io/OsmaGiliath/pen/vaPqro)
```
// EXAMPLE I
.parent {
  width:230px;
}
.children {
  display:inline-block;
  width:100px;
}
```

Flexbox: Same (See: https://codepen.io/OsmaGiliath/pen/ajMgjR)

// EXAMPLE II
.parent {
  display:flex;
  flex-wrap: wrap;
}
.children {
  flex:none;
}

Vertical flexbox: Works – but only with a fixed height on the parent element which is not possible in my example since this would limit the elements in the growth (See: https://codepen.io/OsmaGiliath/pen/ZjPdVx)
```
// EXAMPLE III
.parent {
  display:flex;
  flex-wrap: wrap;
  flex-direction:column;
}
.children {
  flex:none;
}
```

Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/column-count / combine that with media-queries to adjust between 1 and 2 columns. — Tobias K., Aug 13 '18 at 19:35
The last solution (vertical flexbox) is the best way to achieve what you want. The question is: how you define the max height of parent element on Desktop size? You don't want fixed height, but you need to define at which point elements start to wrap. — pennyroyal, Aug 13 '18 at 19:36
- hum.. a fixed max height would create a lot of new hassle since it must be different for all screen sizes and must change with each content update :( - @niemaszoka Jep, it's always 4 divs. — TiPE, Aug 13 '18 at 20:55

score 0 · Answer 1 · answered Aug 13 '18 at 21:14

You can add columns that will warp up in one column if there is no enough width. This will allow you to display it as one column on mobiles. See working example here: https://codepen.io/anon/pen/BPEaXQ . You can see it working by changing the width of parent "grid" element to simulate mobiles.

<div class="grid">
  <div class="column">
  <div class="element higher">1</div>
  <div class="element">2</div>
  </div>
   <div class="column">
  <div class="element">3</div>
  <div class="element">4</div>
  </div>
</div>


.grid {
 display:flex;
 flex-wrap:wrap;
 flex-direction:row;
 margin:0 auto;
 width:230px;
 border:1px solid blue;  
}

.column {
  display: flex;
  flex-direction: column;
}

 .element {
   width:100px;
   height:140px;
   margin:5px;
   background: red;
 }

 .higher {
   height:160px;
 }

score 0 · Accepted Answer · answered Aug 13 '18 at 21:30

I finally found a solution thanks to the comment by @tobias-k.

For Desktop:

Using columnt-count: 2 on the parent element
Change the order of the 2nd and 3rd element

For Mobile:

Position the elements in a column using flexbox
Use flexbox's order to swap back the 2nd and 3rd element

https://codepen.io/OsmaGiliath/pen/vaMYPY

Thank you for all the quick responses!

Column based grid with flexbox

2 Answers2