Subgrid
subgrid lets a nested grid inherit track sizing from its parent grid. It helps align inner content with outer columns or rows without duplicating track definitions.
Overview
subgrid lets a nested grid inherit track sizing from its parent grid. It helps align inner content with outer columns or rows without duplicating track definitions.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 117 | 117 | 71 | 16 | 117 | 16 | |
| CSS property | ||||||
| The CSS grid layout module includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does and gives some use cases and design patterns that the feature solves. | 117 | 117 | 71 | 16 | 117 | 16 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}Live demo
Use cases
Aligned card internals
Keep titles, metadata, and actions aligned across nested cards inside one larger grid.
Editorial layouts
Share column logic between outer page regions and inner article or module structures.
Cautions
- Subgrid depends on a parent grid context, so it is only useful when the overall layout is already grid-based.
- Overly intricate nested grids can become hard to maintain if the alignment goals are not clear.
Accessibility
- Shared alignment can improve scanability, but keep DOM order meaningful even when visual structure becomes more refined.
Related links
Powered by web-features