CSS Grid
CSS Subgrid
Align nested content to tracks defined by an ancestor grid without copying track sizes. It demonstrates sharing ancestor row or column tracks so nested cards, forms, and aligned content follow one grid definition.
A subgrid is a nested grid that adopts the track sizing and line names of its parent grid on one or both axes. It aligns nested content without copying track definitions.
Ordinary nested grids calculate their tracks independently, so headings and actions in neighboring cards may not align. Subgrid lets those internal elements participate in shared ancestor tracks while the card remains a meaningful wrapper. The child still contributes margins, padding, and content to the shared sizing calculation. This topic also connects with CSS Grid Container and Grid Placement.
A nested grid can adopt parent tracks
Example
css
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}Each card spans three parent row tracks, then uses those rows as its own. Titles, summaries, and actions align across cards even when their content lengths differ.
Subgrid on one or both axes
Example
css
.nested {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: auto 1fr auto;
}A subgrid inherits track sizing and line names on the chosen axis. Its own margins, padding, and gaps still affect how content fits.
Subgrid Syntax
| Declaration | Purpose | Example |
|---|---|---|
| grid-template-columns: subgrid | Uses the parent grid's column tracks. | grid-template-columns: subgrid |
| grid-template-rows: subgrid | Uses the parent grid's row tracks. | grid-template-rows: subgrid |
| gap | Overrides the inherited subgrid gap when needed. | gap: 0.5rem |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Subgrid example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
.nested {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: auto 1fr auto;
}
</style>
</head>
<body>
<main class="cards"><article class="card"><h2>Short title</h2><p>A longer summary that takes more room.</p><button>Open</button></article><article class="card"><h2>A title that wraps over two lines</h2><p>Short summary.</p><button>Open</button></article><article class="card"><h2>Third title</h2><p>Another summary.</p><button>Open</button></article></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| subgrid | 117 | 117 | 71 | 16 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Use subgrid for real cross-component alignment. If the child does not need to share ancestor tracks, an ordinary nested grid is simpler.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Choose subgrid only when nested content must align with ancestor tracks.
Use subgrid for alignment that crosses component boundaries, such as card rows or form labels. If the nested content has no reason to share ancestor lines, keep an ordinary grid; it is more isolated and easier to reuse in a different context.