🧩
CSS Subgrid
Inherit parent grid tracks to children
In grid layouts, child elements with their own grids had synchronization issues with parent track definitions. Subgrid solves this by specifying the subgrid value in grid-template-rows or grid-template-columns to inherit parent tracks directly.
This enables layouts where title, body, and button areas align perfectly across different cards in a card list.
How to Apply
1
Set display: grid and track definitions on parent element
2
Apply display: grid to child elements
3
Specify grid-template-rows: subgrid or grid-template-columns: subgrid
4
Define parent track range with grid-row on child elements
Pros
- ✓ Guaranteed alignment consistency in nested grids
- ✓ Clean implementation without complex workarounds
Cons
- ✗ Dependent on parent tracks, making independent layout changes difficult
- ✗ Debugging parent-child track relationships can be complex
Use Cases
Unified header, body, footer alignment in card lists
Maintaining label and input field alignment in form layouts