What is CSS Subgrid?
Before the subgrid feature arrived in CSS Grid, a nested grid container was entirely independent of its parent's grid tracks. If you wanted the columns of a nested "Card" to align perfectly with the page-level grid, you had to perform complex mathematical layouts or duplicate grid definitions, which broke easily on responsive changes.
By defining grid-template-columns: subgrid (or using the Tailwind v4 utility grid-cols-subgrid), the nested container inherits the sizing and gap structures of the parent tracks it spans. This is revolutionary for complex layouts like interlocking masonry, aligned card headers, or complex data tables.