Subgrid lets nested grids inherit track sizing from parents. Here's how to use it effectively.
Basic Subgrid
Loading code block...
Card Grid Alignment
Loading code block...
Form Layout
Loading code block...
Nested Navigation
Loading code block...
Both Axes Subgrid
Loading code block...
Table-Like Layout
Loading code block...
Gallery with Captions
Loading code block...
Responsive Subgrid
Loading code block...
Timeline Layout
Loading code block...
Pricing Table
Loading code block...
Fallback for No Support
Loading code block...
Complex Dashboard
Loading code block...
Best Practices
Usage:
✓ Use for aligned nested content
✓ Apply to direct children only
✓ Combine with auto-rows for flexibility
✓ Test responsive behavior
Patterns:
✓ Card layouts with aligned sections
✓ Form labels and inputs
✓ Tables without table elements
✓ Pricing/feature comparisons
Avoid:
✗ Overusing nested subgrids
✗ Forgetting gap inheritance
✗ Ignoring browser support
✗ Complex subgrid hierarchies
Conclusion
Subgrid enables nested grid alignment without recalculating track sizes. Use it for cards, forms, tables, and any layout requiring consistent alignment across nested elements. Provide fallbacks for browsers without support.