CSS Subgrid: Align Nested Grids Without Duplicating Tracks
Aligning nested grids without duplicating tracks
Inner grids used to repeat the parent's column definitions to align. That was fragile and got out of sync. Subgrid inherits the parent's tracks so everything lines up.
.parent { display: grid; grid-template-columns: 1fr 1fr 1fr;}.child-grid { display: grid; grid-template-columns: 1fr 1fr 1fr;}.parent { display: grid; grid-template-columns: 1fr 1fr 1fr;}.child-grid { display: grid; grid-template-columns: subgrid;}subgrid Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
Single source of truth
Column tracks are defined once on the parent. Change the parent, nested content aligns automatically.
No duplication
No copying 1fr 1fr 1fr or repeat() into every nested grid. Less code, fewer mismatches.
Real alignment
Cards, lists, or forms that span the same columns actually line up across sections.
How it works
The old way was to give the inner grid the same grid-template-columns as the parent so things visually lined up. Any time you changed the parent's columns, you had to find and update every nested grid. Easy to miss one and end up with misaligned content.
With grid-template-columns: subgrid, the child grid does not define its own columns. It reuses the parent's track list. Add or change columns on the parent once, and every subgrid lines up. You can also use grid-template-rows: subgrid for row alignment.