In CSS Grid, what does `grid-template-columns: subgrid` do, and how does it differ from giving a nested grid its own column tracks?

## The problem subgrid solves CSS Grid gives you a two-dimensional grid, but before subgrid that grid stopped at the grid container's direct children. If a grid item was itself a grid container, it started a brand-new, unrelated grid. Its tracks were computed from its own content, in its own content box. Two sibling items could each contain a heading and a body, and the boundary between them would sit at a different vertical position in each one, because each nested grid sized its rows from its own content. `subgrid` removes that isolation on a chosen axis. ## What the value actually means `subgrid` is a value of `grid-template-columns` and `grid-template-rows`. Two conditions must hold for it to do anything: 1. The element must be a grid container — `display: grid` or `display: inline-grid`. 2. That same element must itself be a grid item of an outer grid container. If there is no parent grid, `subgrid` behaves as `none`, so the element simply has no explicit tracks on that axis and everything falls into implicit tracks. When both conditions hold, the element does not create tracks on that axis. Instead it adopts the parent grid's tracks that its own grid area spans. The count is decided entirely by the span: ```css .parent { display: grid; grid-template-columns: 8rem 1fr 4rem; } .child { grid-column: 1 / -1; /* spans all three parent columns */ display: grid; grid-template-columns: subgrid; /* therefore has three columns */ } ``` `.child` now has exactly three columns, sized `8rem`, `1fr` and `4rem` — and positioned at the parent's line positions, not recomputed. A grandchild placed in the second column starts and ends exactly where the parent's second column does. If the item had spanned only two parent columns, the subgrid would have two columns. ## Per-axis, and mixable The two axes are independent. This is a common shape: ```css .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; /* rows come from the parent */ grid-template-columns: minmax(0, 1fr) auto; /* columns are the card's own */ } ``` Rows are inherited so that content aligns across sibling cards; columns are defined locally because nothing outside the card needs to align to them. ## Sizing flows both ways Subgrid is not a one-way read of the parent's numbers. The subgrid's own items contribute their intrinsic size to the parent's track sizing, just as the subgrid's direct content would. So if the parent has an `auto` row and a subgridded card puts a tall paragraph in it, that parent row grows — and every sibling subgrid on that row grows with it. That mutual contribution is precisely why alignment across siblings works: all of them are measuring against one shared set of tracks. ## Independent nested grid, by contrast ```css .card { display: grid; grid-template-rows: auto 1fr auto; } ``` This card has three rows sized from *its own* content, inside its own content box. It is a perfectly good layout for the card in isolation, and it does guarantee the footer sits at the bottom of that card. What it cannot do is coordinate with a sibling card: if one card's heading wraps to two lines and another's does not, the row boundaries inside the two cards sit at different heights. Choosing between them is a scope question — does anything *outside* this box need to align to these lines? If yes, subgrid; if no, an independent nested grid is simpler and has no span requirements. ## Practical details that bite - The span is the source of truth for track count. Forgetting `grid-row: span 3` leaves the subgrid with a single row, and everything piles into it or into implicit tracks. - Padding or a border on the subgrid box insets its track area from the grid area, so its tracks no longer sit exactly on the parent's lines. Put the padding on the grandchildren instead when exact alignment matters. - Gutters come from the parent by default, and line names are inherited too, so you can place grandchildren using names declared on the outer grid. ## Support Subgrid shipped in Firefox 71, Safari 16, and Chrome/Edge 117 (September 2023), so it is available across all current major browsers; only genuinely old browser targets need a fallback. Feature-detect with `@supports (grid-template-columns: subgrid)` when your support matrix still includes them.