How to achieve grid row with more than one element vertically?

Question

I have a two column grid layout that holds boxes of heights X and 2X (fiddle, screenshot below)

Box number two has empty space underneath it, enough empty space to fit box 3:

I want to know if it is possible to have card 3 placed in that empty space (and have card 4 take card 3's place, and card 5 take card 4's place)

I attempted this layout with flex, but I reached this same situation.

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  border: 2px solid black;
  padding: 1em;
  height: 50px;
}

.bigbox {
  border: 1px solid black;
  padding: 1em;
  background: red;
  height: 150px;
}

<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>

score 1 · Accepted Answer · answered Apr 15 '19 at 16:51

1

Don't set the height on the grid items themselves.

Use grid-auto-rows at the container level, then span for the grid areas.

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px; /* new */
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  grid-row: span 1; /* new */
  border: 2px solid black;
  padding: 1em;
}

.bigbox {
  grid-row: span 3; /* new */
  border: 1px solid black;
  padding: 1em;
  background: red;
}

<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>

answered Apr 15 '19 at 16:51

Michael Benjamin

346,931
104
581
701

Great, that is really helpful! I have to ask, however, if it would be possible to achieve this with hard-coded heights for the big and the small box. The way I have it layed out right now has certain values for the box heights, and they change responsively so its a bit of a mess to adapt it to this simple solution. – juancho Apr 15 '19 at 17:22
Try using Grid's *line-based placement* feature. See my answer here: https://stackoverflow.com/a/50718785/3597276 – Michael Benjamin Apr 15 '19 at 18:22

How to achieve grid row with more than one element vertically?

1 Answers1