CSS Subgrid causing unwanted gap

Question

I have a CSS grid of "cards" that can have some optional content in the middle. Within the cards I'm using grid-template-rows: subgrid so that the rows of content in each card can align with other cards. I'm using a row-gap: 50px to space the cards apart from each other but then I use row-gap: 0 in the card because I don't want to inherit the gap within the card.

The problem is I now have a space in the middle of each card that I can't seem to collapse. It is always tied to the parent grid's row-gap. Can someone explain what I'm missing?

Reproduced below or here: https://codesandbox.io/p/sandbox/jft9cp

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: min-content;
  column-gap: 15px;
  row-gap: 50px;
}
.card {
  border: 1px solid black;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}
.topRow {
  grid-row: 1;
}
.middleRow {
  grid-row: 2;
}
.bottomRow {
  grid-row: 3;
}
body {
  font-size: 26px;
}

  <div class="grid">
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Middle Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Optional</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
  </div>

Temani Afif · Accepted Answer · 2025-08-27 21:58:32Z

You are not inheriting the gap but it's still there on the main grid and since you are spanning 3 rows, you will have at least 2 gaps so a minimum of 100px of height.

Here is your code with empty divs. You will notice a height equal to 102px (2 gaps + border).

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: min-content;
  column-gap: 15px;
  row-gap: 50px;
}

.card {
  border: 1px solid black;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}

.topRow {
  grid-row: 1;
}

.middleRow {
  grid-row: 2;
}

.bottomRow {
  grid-row: 3;
}

body {
  font-size: 26px;
}

<div class="grid">
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
  <div class="card">
    <div class="topRow"> </div>
    <div class="middleRow"> </div>
    <div class="bottomRow"> </div>
  </div>
</div>

Instead of using gap, consider an empty row with 50px of height

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: auto auto auto 50px; /* 3 rows + gap */
  column-gap: 15px;
  margin-bottom: -50px; /* the hacky part of the solution to avoid the space of the last row */
} 
.card {
  border: 1px solid black;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* span 4 rows */
  margin-bottom: 50px; /* to consume the fourth row as margin */
}
.bottomRow {
  grid-row: 3; /* defining the bottom row is enough */
}


body {
  font-size: 26px;
}

<div class="grid">
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Middle Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Optional</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
  </div>
  
  Some content after

Thanks for clear explanation. I'm sad the solution to row-gap is to not use row-gap but I guess nothing is perfect. I'll either use your extra grid row or maybe just some margins. Either way, nice answer.

Tushar Jadav · Accepted Answer · 2025-08-28 11:10:28Z

To remove the unwanted space, you need to decouple the .card's internal layout from the parent's row-gap or adjust the grid structure.

Instead of relying on subgrid, define the .card's internal rows explicitly and control the gaps within it. Remove grid-template-rows: subgrid and use a standard grid with your own row definitions.

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: min-content;
  column-gap: 15px;
  row-gap: 50px;
}
.card {
  border: 1px solid black;
  display: grid;
  grid-template-rows: auto auto auto; /* Explicit rows */
  row-gap: 0; /* No internal gap */
}
.topRow {
  grid-row: 1;
}
.middleRow {
  grid-row: 2;
}
.bottomRow {
  grid-row: 3;
}
body {
  font-size: 26px;
}

 <div class="grid">
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Middle Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="middleRow">Optional</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
    <div class="card">
      <div class="topRow">Top Row</div>
      <div class="bottomRow">Bottom Row</div>
    </div>
  </div>

notice how the bottom row of the third item is not aligned with the others, that's why subgrid is needed

Collectives™ on Stack Overflow

CSS Subgrid causing unwanted gap

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related