Grid
CSS Grid layout primitive supporting columns (1-6), rows (1-6), alignment, and token gap scale.
// Plain markup
import { Grid } from "@shavin/ui";Responsive 3-Column Grid
Card 1
Card 2
Card 3
<Grid columns="3" gap="4">
<Card p="4">Card 1</Card>
<Card p="4">Card 2</Card>
<Card p="4">Card 3</Card>
</Grid>Props
| Prop | Type | Default |
|---|---|---|
| as | ElementType | — |
| translucent | boolean | — |
| columns | "1" | "2" | "3" | "4" | "5" | "6" | "2" |
| rows | "1" | "2" | "3" | "4" | "5" | "6" | — |
| align | "start" | "center" | "end" | "stretch" | "stretch" |
| gap | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "4" |