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.
2 display: grid;
3 grid-template-columns: 1fr 1fr 1fr;
4}
5
6.child-grid {
7 display: grid;
8 grid-template-columns: subgrid;
9}
10/* Stays in sync with parent */
2 display: grid;
3 grid-template-columns: 1fr 1fr 1fr;
4}
5
6.child-grid {
7 display: grid;
8 grid-template-columns: 1fr 1fr 1fr;
9}
10/* Breaks when parent columns change */
Browser Support for Subgrid
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.