Grid
Grid is a CSS grid container component. Use it with GridColumn to build column-based layouts.
Basic 12-column grid
Three equal columns using span=4 each.
span 4
span 4
span 4
vue
<Grid :cols="12" gap="md">
<GridColumn :span="4">Column A</GridColumn>
<GridColumn :span="4">Column B</GridColumn>
<GridColumn :span="4">Column C</GridColumn>
</Grid>Uneven spans
span 3
span 9
span 6
span 6
vue
<!-- 3 + 9 -->
<Grid :cols="12" gap="md">
<GridColumn :span="3">Sidebar</GridColumn>
<GridColumn :span="9">Main Content</GridColumn>
</Grid>
<!-- 6 + 6 -->
<Grid :cols="12" gap="md">
<GridColumn :span="6">Left</GridColumn>
<GridColumn :span="6">Right</GridColumn>
</Grid>Gap variants
gap="none"
1
2
3
4
gap="sm"
1
2
3
4
gap="md" (default)
1
2
3
4
gap="lg"
1
2
3
4
gap="xl"
1
2
3
4
vue
<Grid :cols="4" gap="none">...</Grid>
<Grid :cols="4" gap="sm">...</Grid>
<Grid :cols="4" gap="md">...</Grid>
<Grid :cols="4" gap="lg">...</Grid>
<Grid :cols="4" gap="xl">...</Grid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 12 | Number of grid columns |
gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Gap between cells (0 / 8px / 16px / 24px / 32px) |
Slots
| Slot | Description |
|---|---|
| default | Grid cells — typically GridColumn components |