CSS subgrid lets nested card content share parent grid tracks without JavaScript

A common CSS Grid problem occurs when cards with variable-length content have misaligned footers and headers across a row. Developers have typically worked around this using flexbox tricks, fixed heights, or JavaScript-based height measurement with ResizeObserver. The root cause is that CSS Grid only controls direct children, leaving inner card sections isolated in their own formatting contexts. The CSS subgrid feature fixes this by allowing a grid item to inherit its parent's row or column tracks, so nested elements like headers, bodies, and footers slot into shared tracks automatically. With subgrid, every header and footer across a card row aligns without any scripting or hardcoded dimensions.