subgrid
A value of `grid-template-columns` and `grid-template-rows` that makes a nested grid reuse the tracks of its parent grid.
Syntax
grid-template-columns: subgrid;Parameters
| Parameter | Type | Description |
|---|---|---|
| subgrid | keyword | Used instead of a track list. The element must itself be a grid item spanning the tracks it borrows. |
Examples
Cards whose titles, texts and buttons line up across the row, whatever the text length:
<style>
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: 6px; padding: 8px; border: 1px solid #ccc; border-radius: 8px;
}
.card h3 { margin: 0; }
.card p { margin: 0; }
</style>
<div class="cards">
<div class="card"><h3>Basic</h3><p>Short text.</p><button>Buy</button></div>
<div class="card"><h3>Pro plan for teams</h3><p>A much longer description that wraps onto several lines.</p><button>Buy</button></div>
<div class="card"><h3>Max</h3><p>Medium text here.</p><button>Buy</button></div>
</div>Notes
Without subgrid each card is its own grid, and the buttons end up at different heights. With it, the rows belong to the outer grid, so every card shares them. Remember grid-row: span 3 (or grid-column) — the item must occupy the tracks it reuses. Supported in all current browsers since 2023.
See also
- grid-template-columns — The number and widths of the columns of a grid.
- grid-template-rows — The number and heights of the rows of a grid.
- grid-row — Which rows a grid item occupies.
- gap — The gaps between items in flexbox and grid.
In the tutorial
- Subgrid — The subgrid value — how a nested block uses the lines of the parent grid, aligning headings, text and buttons across neighbouring cards, and browser support.