subgrid: child grids that align with parent

When a nested grid needs to align with its parent

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;   /* title row, body row, footer row */
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;          /* INHERIT row tracks from parent */
  grid-row: span 3;                     /* this card spans all 3 parent rows */
  gap: 12px;
}

Without subgrid, each card has its OWN row sizes — title/body/footer in card 1 doesn't align with card 2. With subgrid, every card's title row lines up with every other card's title row. Same for body and footer.

What this fixes

Before subgrid (2022), the canonical solution was to put all titles in one grid row, all bodies in another, all footers in another — and use display: contents to flatten the DOM. Hacky.

grid-template-columns: subgrid works the same way for columns.

Browser support (2026)

• Firefox: long-standing.
• Safari: shipped 2023.
• Chrome / Edge: shipped late 2023.

Treat as widely supported in 2026. No polyfill — older browsers fall back to non-subgrid layout.

When NOT to use subgrid

If your "alignment across cards" need can be solved by giving every card a fixed-height title or a flexbox spacer, do that. Subgrid is for cases where the content height varies but you want rows to align across siblings.