layout contract
Grid
CSS Grid primitive with responsive column counts.
Variants
- auto
- auto-fit / auto-fill with min track size
- fixed
- Fixed column count (12, 6, 4, 3, 2)
- asymmetric
- Custom track sizes (e.g. sidebar + main)
Sizes
- sm
- gap-2
- md
- gap-4
- lg
- gap-6
Example
<Grid variant="fixed" cols={3} size="md">...</Grid>Usage rule
Default min track for auto variant: 280pt.
The full Grid contract has 3 more rules, plus the do-not patterns. Get the full recipe.