Section 6.4 explained that a grid container's children merely "occupy" a few grid cells by default; if you want to use Grid inside a child, that is a brand-new track system unrelated to the parent grid. subgrid lets a nested grid directly "inherit" the parent grid's row/column tracks, enabling alignment across nesting levels.
The Pain Points Without subgrid
The most common scenario: a row of cards, each with a title, body text and a bottom button, where you want all titles aligned at the top and all buttons aligned at the bottom — but each card's content has a different length. If every card builds its own grid, the row heights can only be sized independently, so the cards can never align across the row.
subgrid Syntax
Set a child's grid-template-columns (or rows) to subgrid, and instead of defining its own track sizes, it directly reuses the tracks of the parent grid within the corresponding range:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
}
.card {
grid-row: span 3; /* spans 3 rows */display: grid;
grid-template-rows: subgrid; /* reuses the parent grid's 3 row tracks instead of recomputing its own */
}
Key differencesubgrid creates no new track size definitions — the row/column sizes are entirely determined by the outermost parent grid; the child merely declares "I want to align to these lines of the parent grid".
Example: Aligning a Card List
DEMO · three cards whose titles/body/buttons align across cards via subgrid (browsers without subgrid support fall back to a plain grid)
Title
A line of body text
A longer title that wraps
This body text is noticeably longer and takes up more lines, to test how well the cross-card alignment holds
Title
Body text of medium length
Key Points
Point
Explanation
Inherited scope
The child must first occupy several tracks of the parent grid with grid-column/grid-row, and only then can subgrid align to that range
Does gap inherit?
subgrid inherits the parent grid's gap by default, and you can also override gap on the child element
Browser support
Mainstream browsers support it, but if the project must support older versions, prepare a "degrade to a plain grid" fallback and feature-detect with @supports (grid-template-columns: subgrid)