Comparison
CSS gridvsSubgrid
CSS grid
you defined the columns once on the container and the children fell into place without any width of their own.
A two-dimensional layout model where the container defines rows and columns and items are placed into them. It is the right tool whenever alignment must hold across both axes, which flexbox cannot guarantee because each of its lines is sized independently. The trade is that the structure lives on the parent, so a component cannot fully control its own placement without the parent cooperating — which is exactly what `subgrid` addresses.
Full entry →Subgrid
the labels in every card line up with each other even though each card is a separate component.
A value for `grid-template-columns` or `-rows` that makes a nested grid adopt its parent's tracks instead of defining new ones. It solves the alignment problem that used to force layout data to be passed down through component props, or fixed heights to be hard-coded. Support is now broad, but the mental model catches people out: the subgrid participates in the parent's track sizing, so its content can change the parent's columns.
Full entry →