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.