What is CSS subgrid and how does it work?

CSS subgrid allows a grid item that is itself a grid container to inherit its parent's grid tracks rather than defining its own. Without subgrid, a nested grid always creates independent tracks — its children cannot align to the outer grid. With grid-template-columns: subgrid, the nested container uses the parent's column tracks directly. A classic use case is card grids where each card has a header, body, and footer — with subgrid, all card footers align to the same row across the entire grid without fixed heights. Subgrid is supported in all major browsers as of 2023 (it was the last major CSS Grid feature to be fully implemented). It solves one of the most requested CSS layout challenges.