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; }

The demo’s full CSS

.dm-sg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.dm-sg article { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 8px;
  padding: 14px; border-radius: 10px; background: #fff; border: 1px solid #dfe2ea; }
.dm-sg h4 { margin: 0; font-size: 15px; }
.dm-sg p { margin: 0; font-size: 13px; line-height: 1.5; color: #3d4450; }
.dm-sg span { align-self: end; justify-self: start; font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 8px; background: #0a0a0f; color: #fff; }

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.