CSS Subgrid: Nested Track Alignment & Parent Line Inheritance
- Last updated
- Prerequisites:
- CSS Grid basics (grid-template-columns/rows)
- Understanding of grid lines and tracks
- css
- subgrid
- grid
- layout
- tracks
- alignment
Read at your depth
The practical view
Subgrid lets a nested grid inherit the track definitions of its parent instead of defining its own. grid-template-columns: subgrid; makes the child grid use the parent's column tracks, so items inside align exactly with the parent's columns. This is the clean solution to the 'card alignment' problem where inner sections need to line up with outer columns: .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .card { grid-column: span 2; display: grid; grid-template-columns: subgrid; }. The same works for rows with grid-template-rows: subgrid.
The same idea in other frameworks
CSS-in-JS with subgrid: styled-system or inline styles can emit grid-template-columns: subgrid for aligned card internals.Angular Material table/card layouts can use subgrid for column-aligned metadata rows inside cards.Vue component libraries (Vuetify) are adopting subgrid for aligned form/card sections.Svelte components compose well with subgrid: parent grid + child .svelte components with subgrid columns.Legacy vs modern
Hard-coded inner tracks vs subgrid inheritance
Repeating fixed track sizes in nested grids drifts from the parent; subgrid ties the inner grid to the parent's actual tracks.
.card__body { display: grid; grid-template-columns: 1fr 1fr; } /* ❌ OLD: re-invents tracks, drifts from parent */.card__body { display: grid; grid-template-columns: subgrid; } /* ✅ NEW: inherits parent's columns */Interview gotchas
Context
This separates developers who understand grid layout from those who just know the display: grid syntax — subgrid is the concept that proves real grid knowledge.
The mechanical answer
A nested grid is an independent grid container inside a grid item: it defines its own tracks, so its internal columns have no relationship to the parent's columns. A subgrid (grid-template-columns: subgrid / grid-template-rows: subgrid) is a grid item whose tracks are the parent's tracks — it does not size its own columns/rows; it aliases the parent's track list and participates in the parent's track sizing algorithm. Subgrid matters whenever inner content must align with outer columns/rows that you cannot hard-code: card metadata rows, form label/value columns inside a broader grid, sticky footers, and table-like layouts. Without subgrid you must duplicate track definitions and manually keep them in sync.
Trap
The naive answer is 'subgrid is just a shortcut for nested grids'. It is a fundamentally different mechanism: shared tracks vs independent tracks. Another trap: assuming subgrid works for both axes by default — you must specify grid-template-columns: subgrid and/or grid-template-rows: subgrid explicitly for each axis; a plain display: grid child is not a subgrid. Candidates who explain the track-alias and line-numbering details show real depth.
Context
This probes the precise geometry semantics of subgrid — the areas where implementation detail trips up even experienced CSS developers.
The mechanical answer
Inside a subgrid, line numbers restart at 1 relative to the subgrid's own box: grid-column: 1 / 3 on a subgridged item spans the first two tracks of the subgrid, regardless of where the subgrid itself sits in the parent. Gaps are inherited from the parent by default — the subgrid uses the parent's row-gap/column-gap unless it overrides them with its own gap property. Content-based sizing works because auto tracks inside a subgrid participate in the shared track-sizing pass: the subgrid's items contribute their sizes to the parent's tracks, so a parent auto row grows to fit nested content. This is why subgrid is the correct tool for perfectly aligned, content-aware layouts.
Trap
The naive answer is 'line numbers inside a subgrid keep the parent's numbering'. They restart at 1 inside the subgrid. Another trap: thinking gaps double up — the subgrid inherits the parent's gaps (no double-gap), and overriding gap on the subgrid changes only the subgrid's internal gaps. Candidates who mention line re-numbering and inherited gutters demonstrate that they have actually used subgrid.