subgrid

Card rows that line up across cards

CaveatA card only inherits rows it actually spans, so grid-template-rows: subgrid does nothing until the card also says grid-row: span 3. The gap comes from the parent on the subgridded axis too, which means a gap set on the card is quietly ignored in that direction.

FallbackWithout subgrid each card keeps its own rows, so the three prices settle at whatever height their own text leaves them and the shared baseline disappears. Nothing overlaps and nothing is unreadable, so this is safe to ship as a refinement on top of an ordinary grid.

<div><h4></h4><p></p><b></b></div>

.cards {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.cards .tier {
  display: grid;
  grid-row: span 3;          /* or it owns one */
  grid-template-rows: subgrid;
}

Published 22 Sep 2026