Subgrid for Aligned Nested Grids
Let children participate in the parent grid so columns line up across nested components.
Responsive DesignAdvanced
Why
Without subgrid, a nested card re-declares its own grid tracks and drifts out of alignment with siblings. Subgrid makes the child use the parent's tracks, so columns stay aligned no matter how deep the nesting.
StatCounter 2024 data shows 58% of web traffic is mobile. CSS container queries (baseline 2023) and subgrid (baseline 2024) eliminate most media-query hacks, reducing responsive CSS by 30-50%.
When
Use subgrid when nested components must align to the same columns (form labels + inputs, card headers + bodies in a list). Baseline 2023 in Chrome/Firefox; Safari 16+.
How
1. Parent grid — display: grid; grid-template-columns: 200px 1fr 100px
2. Child uses subgrid — grid-template-columns: subgrid; (inherits parent tracks)
3. Span rows/cols — grid-column: span 3 on the child still works with subgrid
4. Line up — child's column 1 = parent's column 1, automatically, no re-measuring
5. Fallback — @supports (grid-template-columns: subgrid) { ... } else re-declare tracks
6. Use cases — card lists with aligned icons, forms with aligned labels, tables in grids
7. Naming — use grid-line names from the parent; subgrid inherits them too
Example
/* Parent grid — 3 columns */
.list { display: grid; grid-template-columns: 40px 1fr 80px; gap: 8px; }
/* Each card spans all 3 columns and uses subgrid to align to parent tracks */
.card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
/* Card's icon, body, meta now line up with the parent's columns exactly */
.card .icon { grid-column: 1; }
.card .body { grid-column: 2; }
.card .meta { grid-column: 3; }
/* Fallback — re-declare tracks where subgrid isn't supported */
@supports not (grid-template-columns: subgrid) {
.card { grid-template-columns: 40px 1fr 80px; gap: 8px; }
}
Common Problems
- ⚠Child re-declares tracks — columns drift when content widths differ from parent
- ⚠No fallback — older Safari/Chrome show a broken single-column layout
- ⚠Wrong grid-column span — child uses subgrid but doesn't span the parent's full width
Best Practices
- ✓Span the full parent width — grid-column: 1 / -1 on the subgrid child, then subgrid aligns
- ✓Always provide an @supports fallback — re-declare the tracks for browsers without subgrid
- ✓Use named grid lines — subgrid inherits names, making child placement readable