Short title
One line of copy.
Nested layouts that lock onto the parent grid — the card fix Grid always needed
Three cards, wildly different content lengths. With nested grids, each card sizes its rows independently — buttons land at three different heights. Switch to subgrid: every card inherits the parent's row tracks, and titles, meta, bodies, and buttons snap into shared rows.
One line of copy.
Medium description that takes a couple of lines to explain what this thing does.
The long one: real-world content is never uniform. This body rambles on for several lines — exactly the situation that shattered card alignment for a decade of CSS, forcing min-height hacks and JavaScript equalizers.
1fr, so bodies stretch and every button lands on the same baseline.
Each field group is its own component with its own markup — yet all labels share one max-content column, sized by the longest label in the entire form. No fixed widths, no guessing.
The parent names its lines (full, content). Every subgridded section places children by those names — body text in the content column, figures breaking to full width, all snapped to the same shared lines.
Article text sits in the named content column. This section is a subgrid — it inherits the parent's named lines without redefining anything.
Back to the content column. Every element in every section aligns to one outer grid — the full-bleed pattern with zero width calculations.
Four sharp edges plus the "subgrid does nothing" checklist.
A normal grid invents implicit tracks for overflow children. A subgridded axis doesn't — extra children get crammed into the final track. Content count must match spanned track count.
The subgrid's box spacing comes out of its first and last inherited tracks — visually breaking the alignment you adopted subgrid for. Keep the subgrid container spacing-free; pad children instead.
Gap inherits by default; overriding it changes spacing inside the subgrid without moving the inherited track lines. Edge-case tip: set it explicitly — legacy browser inconsistencies existed around inheritance.
A subgrid only has as many tracks as it spans — span 1 inherits one track and looks like nothing happened. #3 is the most common miss.
Flex-with-margin-auto gets buttons to card bottoms everywhere (just not cross-card aligned); subgrid perfects it where supported. ~90% support in 2026 means most audiences skip the fallback entirely.
Subgrid per-axis: lock columns, keep rows independent (or vice versa). Practical limit: keep subgrid nesting ≤2 levels — deeper chains have cross-browser edge cases and are hard to reason about.