What's the best way to achieve this layout with flexbox? - css

Question

I have 4 columns and three rows. The last tile is two rows high.
I'm working on a code that looks like this:
.gridContainer {
display: flex;
flex-wrap: wrap;
}
.gridItems {
width: 290px;
height: 350px;
margin: 0 5px 10px;
border-radius: 4px;
}
.gridItemsTall {
width: 290px;
height: 710px;
margin: 0 5px 10px;
border-radius: 4px;
}

Answer 1

A good way to achieve this with flexbox it's by using a combinaison of flex-direction: column, flex-wrap: wrap and max-height.
He is an update of your CSS :
.gridContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
max-height: 1080px; // box height *3 + margin-bottom*3 -> 350*3 + 10*3
}
.gridItems {
width: 290px;
height: 350px;
margin: 0 5px 10px;
border-radius: 4px;
background-color: #ccc;
}
.gridItemsTall {
height: 710px;
}
And on the following link, you can find a live example : https://jsfiddle.net/julienvanderkluft/dkdfy7gb/
Note that the height of .gridContainer can be manipulate by JavaScript for more flexibility.

Answer 2

You can use CSS Grid layout instead of flexbox in this case. You just need to set grid-row: span 2 on element you want to take two rows.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
grid-gap: 10px;
width: 200px;
}
.box {
background: #aaa;
}
.large {
grid-row: span 2;
}
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box large"></div>
<div class="box"></div>
<div class="box"></div>
</div>