Auto rows based on content in column

Question

Hey,

i am trying to achieve this kind of layout with css grid. I have set the container div of these items to display: gridand grid-template-columns: repeat(3, 1fr). Then i layed out the items with grid-column and grid row. This gives me an 3x3 grid. But i need a grid with 2 rows in the first column, 3 rows in the middle column and two rows in the third column. Based on the size of the item. Is there any way of doing this with css grid, i am stuck at the moment. Thanks in advance

Answer 1

You can take up to 2 spaces with grid-row: span 2;

.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
}

.gr2 {
  grid-row: span 2;
}
.box {
  background-color: red;
}

<div class="grid">
  <div class="box gr2">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box gr2">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>