Subgrid allows nested grids to inherit track sizing from their parent grid. Here's how to use it for perfectly aligned layouts.
Basic Syntax
Loading code block...
Card Grid Alignment
Loading code block...
Form Layout
Loading code block...
Navigation Menu
Loading code block...
Table-like Layout
Loading code block...
Feature Comparison Grid
Loading code block...
Article Layout
Loading code block...
Dashboard Grid
Loading code block...
Pricing Cards
Loading code block...
Timeline Layout
Loading code block...
Named Grid Lines
Loading code block...
Best Practices
When to Use:
✓ Aligning nested items with parent
✓ Card layouts with consistent parts
✓ Form label/input alignment
✓ Table-like structures
✓ Complex multi-level layouts
Patterns:
✓ Span all parent columns/rows
✓ Use with named grid lines
✓ Combine with gap inheritance
✓ Match parent track count
Browser Support:
✓ Check caniuse.com
✓ Provide fallbacks
✓ Use @supports
✓ Progressive enhancement
Avoid:
✗ Subgrid without spanning
✗ Mismatched track counts
✗ Over-nesting grids
✗ Forgetting gap inheritance
Conclusion
CSS subgrid enables perfect alignment between nested grids and their parents by inheriting track definitions. Use it for card grids with consistent headers and footers, form layouts with aligned labels, table-like structures, and any layout where nested items need to align with a parent grid's tracks. Remember that the child must span the parent tracks it wants to inherit, and gaps are also inherited from the parent grid.