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

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;
}

[Calculator keypad layout with flexbox](https://stackoverflow.com/q/39079773/3597276) — Michael Benjamin, Jan 04 '18 at 00:23

score 1 · Accepted Answer · answered Jan 04 '18 at 02:47

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.

Thank you! This is exactly what I was looking for. – adp Jan 04 '18 at 21:44 — adp, Jan 04 '18 at 21:44

score 0 · Answer 2 · answered Jan 04 '18 at 00:35

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>

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

2 Answers2