CSS Subgrid Patterns

A guide to using CSS subgrid for aligning nested grid items to parent grid tracks for consistent, aligned layouts.

Usage

Ask about CSS subgrid, nested grid alignment, or consistent layout patterns.

Examples

• "Align card headers and footers across a row of cards"
• "How does subgrid differ from nested grid?"
• "Create a form layout with aligned labels using subgrid"

Guidelines

• Use subgrid on the axis where child items need parent alignment
• Apply display: grid and grid-template-rows: subgrid on the child
• Subgrid inherits track sizes but allows local gap override
• Works for both grid-template-rows and grid-template-columns
• Combine with named grid lines for readable layouts