Layout

Subgrid

Widely availablesince Mar 2026

Replaces: Fixed heights and duplicated track lists to line up the insides of sibling cards. Children join the parent’s grid lines.

See it working

Starter

One short line.

Choose

A much longer plan name that wraps

This description runs to several lines, which used to push this card’s button out of line with its neighbours.

Choose

Team

Two lines of text here, a little more than the first.

Choose

The syntax

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card  { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

For browsers without it

Without subgrid each card sizes its own rows, so titles and buttons stop lining up across cards. The content is all still there. Wrap the subgrid lines in @supports (grid-template-rows: subgrid) if the unaligned version needs different spacing.