Expand CSS grid items based on number child elements

Question

I'm aware can set the number of columns a grid item spans using:

grid-column: span 2;

But is it possible to have CSS grid do this automatically only if there is space available?

So in the case of the mockup below, if there are three items they each take up a full column, but if there are two, the last item will expand to fill up the empty column.

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

.grid-item {
  padding: 50px;
  color: white;
  background-color: lightpink;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<br />
<hr />
<br />

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item">I should take up two columns</div>
</div>

Perhaps try nth-child? https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — Lee, Sep 30 '21 at 17:09

score -1 · Answer 1 · answered Sep 30 '21 at 18:18

Instead of hardcoding and using span 2 (which is useful sometimes) you can use grid-column: 2 / -1;. It says that your grid column should start from the second col and should span until it has the space (exactly what you want)

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

.grid-item {
  padding: 50px;
  color: white;
  background-color: lightpink;
}

.grid-item-2 {
  grid-column: 2 / -1;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<br />
<hr />
<br />

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item-2">I should take up two columns</div>
</div>

Expand CSS grid items based on number child elements

1 Answers1