Subgrid: Aligning Nested Grids To Their Parent

Picture a row of pricing cards, each with a title, a variable-length description, and a footer button. If each card independently uses display: grid to lay out its own title/body/footer, every card's internal rows size purely based on that card's own content — a card with a longer title pushes its body down, while its neighbor's shorter title doesn't, breaking the visual alignment of the whole row.

Before subgrid, fixing this required either JavaScript measuring the tallest title across all cards and forcing a fixed height, or abandoning per-card grids in favor of one giant, harder-to-reason-about parent grid spanning every card's internals directly.

The parent grid defines the shared row tracks once — title row, body row, footer row — sized to fit the tallest content across all cards. Each card, instead of declaring its own independent grid-template-rows, sets grid-template-rows: subgrid and spans the appropriate number of parent rows with grid-row: span 3. The card's own children (title, body, footer) then align to those exact same parent-defined row lines as every sibling card's children.

The result: every card's title sits on the same line, every footer sits on the same line, regardless of how much content any individual card actually has — solved entirely in CSS, with zero JavaScript measurement.

When the parent grid names its tracks — [title-start] auto [body-start] 1fr [footer-start] auto [footer-end] — a subgrid automatically inherits those same named lines. A card's title element can then be placed with grid-row: title-start, using the exact same semantic vocabulary the parent grid defined, rather than reasoning about raw numeric line indices that shift if the grid structure changes.

This compounds well with larger design systems: a page-level layout grid can define named regions once, and every nested subgrid throughout the component tree can reference those same names consistently, keeping alignment intent readable even several nesting levels deep.

When A Nested Grid Needs To Line Up With Its Parent. Put a grid inside a grid item, and by default it creates its own independent set of tracks — completely unaware of the parent grid's column and row lines. subgrid changes that: a nested grid can adopt its parent's tracks directly, so content inside sibling cards finally aligns even when each card's internal content varies in length.

The Problem: Independent Nested Grids Don't Align. A row of cards, each internally using display: grid for its title/body/footer, will not align those internal rows across cards by default — one card's grid is entirely independent of its neighbor's, even though visually they're supposed to line up in a shared row.

The Misalignment Problem. Why don't three cards, each with display: grid and varying content, align their internal rows by default?

• →It's a browser rendering bug
• →Each nested grid establishes its own independent set of tracks, unaware of its siblings or parent
• →Grid can never align nested content; only Flexbox can

Adopting Parent Tracks With subgrid. Setting grid-template-columns: subgrid (or -rows) on a nested grid item tells it to adopt its parent's track definitions directly for that axis, instead of defining its own. The nested grid's own children then align to the exact same lines as their cousins in sibling cards.

Using subgrid. What does grid-template-rows: subgrid do on a nested grid item?

• →It creates a brand new, independent set of row tracks
• →It makes the nested grid adopt the row tracks of its parent grid directly
• →It disables grid layout on that element entirely

Named Lines Propagate Through Subgrid. A particularly powerful detail: named grid lines defined on the parent grid are inherited by a subgrid automatically, letting nested content reference the same semantic line names ([title-start], [footer-end]) as the outer grid, keeping the whole layout's structure self-documenting across nesting levels.

Named Line Inheritance. If a parent grid defines a named line like [title-start], can a subgrid's children reference that same name directly?

• →No — named lines must be redeclared inside the subgrid
• →Yes — subgrid inherits the parent's named lines automatically
• →Only if the subgrid explicitly renames them first

Subgrid Alignment Mastered. You now understand why nested grids misalign by default, how subgrid lets a nested grid adopt its parent's exact tracks, and how named grid lines propagate through subgrid to keep deeply nested layouts semantically consistent.

Inherit The Parent Grid's Tracks. grid-template-columns: subgrid lets a nested grid align to its parent grid's column tracks exactly.