Dimensional Inheritance: The Subgrid Architecture
Solving the cross-component alignment problem in CSS Grid Level 2.
Since the inception of CSS Grid (Level 1), developers faced a glaring architectural limitation: nested grids were completely blind to the track sizing of their parents. If you created a horizontal row of "Card" components where each card had an internal layout (Header, Body, Footer), there was no native way to align the internal Headers across all cards horizontally. If one card had a longer title, its header grew, instantly misaligning it with sibling cards.
The grid-template-columns: subgrid (and rows) specification resolves this by allowing deep DOM nodes to opt into their ancestor's dimensional tracks. When a child container declares itself a subgrid, it halts the creation of its own independent layout tracks. Instead, it "punches through" the DOM hierarchy to attach its own children directly to the sizing calculations of the master parent grid.
This establishes true multidimensional alignment. You can now define a macro-level application grid, and have deeply nested micro-components align perfectly to those macro tracks without resorting to hacky fixed heights, JavaScript resize observers, or accessibility-damaging display: contents workarounds.