Skip to content

CSS Subgrid

When to Use

When children of a grid item need to align to the parent grid's tracks — the classic example is card components in a grid where each card's header, body, and footer should align across all cards in a row regardless of content length.

Decision

If you need... Use... Why
Card footers aligned across a row subgrid on grid-template-rows Cards inherit parent row tracks
Form labels aligned across nested items subgrid on grid-template-columns Nested columns align to parent grid
Consistent internal alignment in a component subgrid Replaces JS height equalization
Simple single-level grid layout Regular grid Subgrid adds complexity without benefit

Pattern

The card alignment use case — each card has three internal zones (header, body, footer) that align perfectly across a row:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto; /* header | body | footer */
  gap: 1rem;
}

.card {
  grid-row: span 3;        /* Span all three row tracks */
  display: grid;
  grid-template-rows: subgrid; /* Inherit the parent's row tracks */
  gap: 0;
}

/* Each zone now aligns with its counterpart in other cards */
.card__header { /* row 1 — always same height across row */ }
.card__body    { /* row 2 — flexible, auto stretches to fill */ }
.card__footer  { /* row 3 — always pinned to bottom */ }

This replaces display: flex; margin-top: auto on footers, JavaScript height equalization, and fixed-height hacks.

Browser support: Chrome 117, Firefox 71, Safari 16. Safe to use. (Firefox had subgrid first, in 2019.)

Common Mistakes

  • Forgetting grid-row: span N on the grid item — the card must span the same number of rows as the parent defines, otherwise subgrid has nothing to inherit
  • Applying gap on the subgrid element — it inherits parent gaps by default; adding gap: 0 prevents double-gapping
  • Using subgrid for column alignment when columns are on a different containing block — subgrid only inherits tracks from the direct grid parent

See Also