Sharing parent tracks
By default a nested grid creates its own independent tracks, so children of separate cards never line up. Subgrid lets a nested grid adopt the track sizing of its parent along one or both axes, so its children snap to the outer grid lines.
- Set grid template columns or rows to the value subgrid.
- The nested grid then uses the parent track lines on that axis.
- You can subgrid one axis and keep your own on the other.
Why alignment improves
A classic problem is a row of cards where each card has a header, body, and footer that should align across cards even when content lengths differ. Subgrid solves this because every card shares the same row lines from the parent.
- Card internals align to shared rows regardless of content.
- Gaps and line names pass through from the parent grid.
- It removes brittle fixed heights used to force alignment.
Subgrid only inherits track definitions, not the items themselves, so each subgrid still places its own content into the shared lines.
Key idea
Subgrid makes a nested grid adopt its parent track lines on chosen axes, so children across separate containers align without fixed heights or fragile hacks.