Grid
A 12-column flex grid. Grid.Col children declare how many columns they occupy via span. Columns, gutter, alignment, and overflow are all configurable.
Basic
span=4
span=4
span=4
<Grid>
<Grid.Col span={4}>first</Grid.Col>
<Grid.Col span={4}>second</Grid.Col>
<Grid.Col span={4}>third</Grid.Col>
</Grid>Mixed spans
span=8
span=4
span=3
span=6
span=3
<Grid>
<Grid.Col span={8}>main</Grid.Col>
<Grid.Col span={4}>sidebar</Grid.Col>
<Grid.Col span={3}>a</Grid.Col>
<Grid.Col span={6}>b</Grid.Col>
<Grid.Col span={3}>c</Grid.Col>
</Grid>Responsive spans
Pass an object to span to specify different column counts at each breakpoint. Unspecified breakpoints cascade from the nearest smaller one — resize the window to see the columns stack.
base=12 md=4
base=12 md=4
base=12 md=4
<Grid>
<Grid.Col span={{ base: 12, md: 4 }}>first</Grid.Col>
<Grid.Col span={{ base: 12, md: 4 }}>second</Grid.Col>
<Grid.Col span={{ base: 12, md: 4 }}>third</Grid.Col>
</Grid>Mix breakpoints freely — all five size tokens are supported.
12 → sm:6 → lg:3
12 → sm:6 → lg:3
12 → sm:6 → lg:3
12 → sm:6 → lg:3
// Breakpoints: xs ≥36em sm ≥48em md ≥62em lg ≥75em xl ≥88em
<Grid>
<Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>a</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>b</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>c</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>d</Grid.Col>
</Grid>Gutter
span=6
span=6
<Grid gutter="xl">
<Grid.Col span={6}>left</Grid.Col>
<Grid.Col span={6}>right</Grid.Col>
</Grid>Grow
span=3, grows
span=3, grows
<Grid grow>
<Grid.Col span={3}>a</Grid.Col>
<Grid.Col span={3}>b</Grid.Col>
</Grid>Offset
span=4
span=4 offset=4
<Grid>
<Grid.Col span={4}>left</Grid.Col>
<Grid.Col span={4} offset={4}>offset by 4</Grid.Col>
</Grid>Auto & content spans
content
auto — fills remaining
<Grid>
<Grid.Col span="content">fits content</Grid.Col>
<Grid.Col span="auto">fills remaining space</Grid.Col>
</Grid>Grid props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 12 | Total column units in the grid |
gutter | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Gap between columns (takes precedence over gap) |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Alias for gutter |
align | 'stretch' | 'center' | 'flex-start' | 'flex-end' | — | Cross-axis alignment |
justify | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | — | Main-axis distribution |
grow | boolean | false | Makes all columns grow to fill the row |
overflow | 'visible' | 'hidden' | — | Column overflow behaviour |
component | string | 'div' | Root HTML element |
Grid.Col props
| Prop | Type | Default | Description |
|---|---|---|---|
span | number | 'auto' | 'content' | GridColSpanBreakpoints | — | Column units to span. Pass an object with any of base xs sm md lg xl keys for responsive spans — unspecified breakpoints cascade from the nearest smaller one. |
offset | number | — | Column units to offset from the left |
order | number | — | CSS order for visual reordering |
component | string | 'div' | Root HTML element |