Subgrid solves a specific problem: the parent owns the tracks, but the nested content needs to align to those tracks. Without Subgrid, teams often duplicate grid-template-columns or grid-template-rows on children and hope the gap, minmax values, and content constraints never drift.
That duplicated track math is the smell. If the child is trying to recreate the parent’s grid, Subgrid is worth considering.
Subgrid is not a general “make this grid smarter” feature. It is a way for a nested grid to participate in the track sizing of its parent.
A common card-list problem
Imagine a row of cards where the title, metadata, body, and action row should line up across every card. A normal nested grid creates local rows inside each card, so the body copy in a longer card pushes only that card’s action row down.
.pricing-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows:
auto
auto
minmax(6rem, 1fr)
auto;
gap: 1rem;
}
.pricing-card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}The card spans four parent rows and then adopts those rows. The action row aligns because it is participating in the parent’s row system. That is more robust than setting arbitrary minimum heights on titles or summaries.
Forms and editorial layouts
Subgrid also earns its place when nested form groups or editorial modules need to align to a parent grid.
.settings-form {
display: grid;
grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
gap: 1rem 1.25rem;
}
.field-group {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}The field group can contain its own markup while still aligning labels, controls, help text, and errors to the form’s columns. This is cleaner than repeating the same two-column grid on every field wrapper.
Editorial layouts have a similar problem. A figure may span the full layout while its caption aligns with the reading column. Subgrid lets that nested figure reuse the page tracks instead of hard-coding the caption width in multiple places.
Keep the contract visible
Subgrid can make a layout feel magical if the parent tracks are not named or documented by the CSS itself. Naming the track purpose makes future edits safer.
.feature-list {
display: grid;
grid-template-rows:
[media] auto
[heading] auto
[body] 1fr
[actions] auto;
}Now the child rule communicates that it inherits meaningful rows. The layout is still compact, but the alignment contract is visible.
Use Subgrid when alignment is the feature
Subgrid is not a default replacement for nested Grid. It earns its place when alignment across siblings matters more than local independence. Good candidates include comparison cards, form rows with nested controls, pricing tables, and editorial layouts where captions or metadata must line up.
Poor candidates include isolated cards, free-flowing galleries, and components that should not know about their parent structure. Do not use Subgrid to fake table behavior for tabular data. If the content is a data table, use a table.
Accessibility and source order
Subgrid is a layout feature. It should not be used to create a visual order that fights the document order. If the reading order becomes confusing without CSS, the markup is carrying the wrong structure.
For comparison cards, keep each card’s content grouped in the source. For forms, keep labels associated with controls. For editorial layouts, make sure captions remain close to their figures in the markup. Subgrid can align those pieces visually, but it cannot repair bad semantics.
Plan for fallback through simplicity
Modern browser support makes Subgrid practical, but the best layouts still degrade through clear structure. If a card list depends on Subgrid for perfect row alignment, the cards should remain readable as normal grids. If a form group inherits columns from a parent, the fields should still appear in a sensible order without that inherited track alignment.
That does not require a large compatibility layer. It usually means writing the base layout as a normal readable stack, then applying Subgrid where alignment adds value. Avoid designs where the content only makes sense when every nested row aligns perfectly. Subgrid should improve comparison and rhythm, not become the only thing holding the meaning together.
When the alignment requirement is actually tabular, use table semantics instead. Subgrid can align comparison cards, but it should not turn arbitrary divs into a data table. The content model still decides the HTML; Subgrid only decides how nested layout participates in parent tracks.
Related guides: Grid vs Flexbox, Alignment in CSS, and Intrinsic sizing.