Advanced Grid: What is CSS Subgrid?

Subgrid allows nested grid items to participate in their parent's sizing tracks, aligning nested content across sibling elements.

Normally, a nested grid creates an entirely new grid context. With grid-template-columns: subgrid, the nested container adopts the column tracks of its parent. This is essential for aligning the headers, bodies, and footers of adjacent card components perfectly.