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.