CSS Subgrid Generator

Subgrid solves one problem precisely, and it is worth stating it exactly: a nested grid can inherit its parent's track sizes instead of creating its own. Before it existed, a row of cards could be made equal height easily enough, but the elements inside them — the heading, the body text, the button — sat wherever their own content put them. One card with a two-line title pushed its body down and every card in the row was internally misaligned.

With subgrid, each card spans a set of the parent's rows and declares grid-template-rows: subgrid. The heading row is now one shared track across all the cards, so it is as tall as the tallest heading and every body starts on the same line. The footers line up at the bottom without a single absolute position or a hardcoded min-height.

The two constraints that trip people up are both about inheritance. First, subgrid only applies to the axis you name — subgrid on rows does not affect columns, and a card needing both must say so. Second, the child must actually span the tracks it wants to inherit, which means grid-row: span 3 on a card that has three internal rows. Leaving that off is why a subgrid declaration often appears to do nothing at all.

The gap is inherited too, and can be overridden on the child, which is the neat detail: cards can sit twenty pixels apart while their internal rows sit eight pixels apart, and both are still one grid.