CSS Mastery

Field Guide / advanced

Subgrid: align nested content without copying track math

Subgrid is most useful when nested children need to inherit the alignment contract of a parent grid.

By Andrew J Hughes

Subgrid solves a specific problem: the parent owns the tracks, but the nested content needs to align to those tracks. Without Subgrid, teams often duplicate grid-template-columns on children and hope the gap, minmax values, and content constraints never drift.

That duplicated track math is the smell. If the child is trying to recreate the parent’s grid, Subgrid is worth considering.

A common card-list problem

Imagine a row of cards where the title, metadata, body, and action row should line up across every card. A normal nested grid creates local rows inside each card, so the body copy in a longer card pushes only that card’s action row down.

.card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto auto 1fr auto;
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

The card spans four parent rows and then adopts those rows. The action row aligns because it is participating in the parent’s row system.

Use Subgrid when alignment is the feature

Subgrid is not a default replacement for nested Grid. It earns its place when alignment across siblings matters more than local independence. Good candidates include comparison cards, form rows with nested controls, pricing tables, and editorial layouts where captions or metadata must line up.

Poor candidates include isolated cards, galleries where content can flow freely, and components that should not know about their parent structure.

Keep the contract visible

Subgrid can make a layout feel magical if the parent rows are not named or documented by the CSS itself. Naming the track purpose makes future edits safer.

.feature-list {
  display: grid;
  grid-template-rows:
    [media] auto
    [heading] auto
    [body] 1fr
    [actions] auto;
}

Now the child rule communicates that it inherits those rows. The layout is still compact, but the alignment contract is visible.

Accessibility and source order

Subgrid is a layout feature. It should not be used to create a visual order that fights the document order. If the reading order becomes confusing without CSS, the markup is carrying the wrong structure. Keep the HTML meaningful first, then use Subgrid to align what is already semantically sound.

References