Subgrid
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.
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.