What does grid-template-rows: subgrid do?

It makes a nested grid adopt the parent grid row tracks instead of defining its own, so items align across siblings.

Is subgrid supported?

Yes, in all current major browsers including Chrome, Edge, Firefox, and Safari. Older versions need a fallback via @supports.

A normal nested grid creates independent tracks. Subgrid shares the parent tracks, which is what lets content line up across cards.

Cards share row tracks so titles and tags line up.

Aligned cards

One line.

Tag

More body copy that runs onto two lines here.

Tag

Each card is a subgrid, so headings and tags align across the row.

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

Nested rows align to the parent columns.

Column align

LabelA longer value

NameShort

Both rows align their label and value columns via subgrid.

.list { display: grid; grid-template-columns: auto 1fr; }
.row {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
}

Keep a working layout where subgrid is unavailable.

Feature query

Subgrid enhances alignment where it is supported

Gate subgrid with @supports and provide a fallback.

@supports (grid-template-rows: subgrid) {
  .card { grid-template-rows: subgrid; }
}

What does grid-template-rows: subgrid do?: It makes a nested grid adopt the parent grid row tracks instead of defining its own, so items align across siblings.
Is subgrid supported?: Yes, in all current major browsers including Chrome, Edge, Firefox, and Safari. Older versions need a fallback via @supports.
Subgrid vs a normal nested grid?: A normal nested grid creates independent tracks. Subgrid shares the parent tracks, which is what lets content line up across cards.