How do I make flex items fit the height of two rows?

Question

I am trying to make a special in a row of flexboxes stretch to be the height of two rows. Here is what I am trying to achieve: What I want. But here is my current result: Result.

I think I have to use flex-wrap: wrap;, but I am not sure. I don't want to do flex-direction: column;, because then I cannot stretch the divs at the top like if they were aligned in a row. I want all the children divs to be part of the same flex container. Does anyone have any ideas?

Note : I found this, where I was able to create this. If somehow I can move the Three up to be next to the Two, I may be able to achieve what I want. Not sure how to do this.

Here is my code I am using:

.flex-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-col {
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

<div class="flex-row">
  <div class="flex-col">
    <p>This box has little text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>
  </div>
  <div class="flex-col">
    <p>This box has little text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>

Thank you.

does all `.flex-col` has to be direct children of `.flex-row` ? — Rainbow, Nov 18 '18 at 21:10
Yes, I would like all the `.flex-col` to be inside the same flex- container. — BGM52, Nov 18 '18 at 21:12
Then your best bet is to use CSS Grid, because flex can go in one direction at a time. — Rainbow, Nov 18 '18 at 21:16
Here's an [example](https://jsfiddle.net/bhteu14a/) of css grid achieving what you wanted easily. — Rainbow, Nov 18 '18 at 21:37

ksav · Accepted Answer · 2018-11-18T21:54:44.390

3

You could do it with grid like this.

body {
  background-color: black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}

.tall {
  grid-row: 1 / 3;
  grid-column: 3;
}

.grid-box {
  background-color: #9e9e9e;
}

<div class="grid">
  <div class="grid-box">
    <p>This box has little text.</p>
  </div>
  <div class="grid-box">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
  <div class="grid-box tall">
    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>
  </div>
  <div class="grid-box">
    <p>This box has little text.</p>
  </div>
  <div class="grid-box">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>

edited Nov 18 '18 at 21:54

answered Nov 18 '18 at 21:51

ksav

20,015
6
46
66

Can you explain to me this `grid-column: 3;` isn't it the third column from the start ? , and why it goes to column 1 when you remove it ? – Rainbow Nov 18 '18 at 21:54
@ZohirSalak There's a good answer here: https://stackoverflow.com/a/43790678/5385381 – ksav Nov 18 '18 at 22:02
1

And the difference between `grid-row: 1 / 3;` and `grid-row: span 2;` ? cuz if you use the later you don't have to specify the column. – Rainbow Nov 18 '18 at 22:12

Itay Gal · Answer 2 · 2018-11-18T21:40:37.107

Wrap 2 divs with a wrapper div. That should do the trick.

.flex-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-col {
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.double {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0px;
}

<div class="flex-row">
  <div class="double">
    <div class="flex-col">
      <p>This box has little text.</p>
    </div>
    <div class="flex-col">
      <p>This box is diffrent than small. It has a middleish amout of text.</p>
    </div>
  </div>

  <div class="double">
    <div class="flex-col">
      <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>
    </div>
    <div class="flex-col">
      <p>This box has little text.</p>
    </div>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>

Would it be possible to make the ones aligned in a row to be the height of one of the items in `.flex-col double`? — BGM52, Nov 18 '18 at 21:21

score 0 · Answer 3 · answered Nov 18 '18 at 22:01

Just for fun, table solution:

table {border-spacing: 10px}

td {
  width: 33%;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-sizing: border-box;
}

<table>
  <tr>
    <td>This box has little text.</td>
    <td>This box is diffrent than small. It has a middleish amout of text.</td>
    <td rowspan="2">This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</td>
  </tr>
  <tr>
    <td>This box has little text.</td>
    <td>This box is diffrent than small. It has a middleish amout of text.</td>
  </tr> 
</table>

How do I make flex items fit the height of two rows?

3 Answers3