Grid
Responsive two-dimensional layout with explicit and automatic tracks.
Add it to your project
Eject the complete grid group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject gridbash
npx toucan eject gridapp.tsx
import { Grid, GridItem } from '@/components/toucan/grid';Use when
Items need aligned rows and columns or responsive column spans.
Avoid when
Only one layout axis matters; Flex is simpler for that case.
Example
1
2
3
Auto 1
Auto 2
Auto 3
Auto 4
Responsive 1
Responsive 2
Responsive 3
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
GridGridItem
Grid
Props type: GridProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
align | "start" | "center" | "end" | "stretch" | "baseline" | { base?: FlexAlign; sm?: FlexAlign; md?: FlexAlign; lg?: FlexAlign; xl?: FlexAlign; } | undefined | No | Alignment within the component layout. |
columns | 1 | 2 | 3 | "auto" | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | { base?: GridColumns; sm?: GridColumns; md?: GridColumns; lg?: GridColumns; xl?: GridColumns; } | 1 | No | The number of grid columns, including responsive values where supported. |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | { base?: GridGap; sm?: GridGap; md?: GridGap; lg?: GridGap; xl?: GridGap; } | undefined | No | Space between child items from the Toucan scale. |
minItemSize | string | undefined | No | Minimum CSS size used by automatic grid tracks. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
GridItem
Props type: GridItemProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
align | "auto" | "start" | "center" | "end" | "stretch" | "baseline" | { base?: SelfAlign; sm?: SelfAlign; md?: SelfAlign; lg?: SelfAlign; xl?: SelfAlign; } | undefined | No | Alignment within the component layout. |
end | 1 | 2 | 3 | "auto" | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | { base?: GridLine; sm?: GridLine; md?: GridLine; lg?: GridLine; xl?: GridLine; } | undefined | No | Ending grid line, including responsive values where supported. |
justify | "auto" | "start" | "center" | "end" | "stretch" | { base?: SelfJustify; sm?: SelfJustify; md?: SelfJustify; lg?: SelfJustify; xl?: SelfJustify; } | undefined | No | Main-axis distribution within the component layout. |
span | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | { base?: GridTrackCount; sm?: GridTrackCount; md?: GridTrackCount; lg?: GridTrackCount; xl?: GridTrackCount; } | undefined | No | Number of grid columns occupied by the item. |
start | 1 | 2 | 3 | "auto" | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | { base?: GridLine; sm?: GridLine; md?: GridLine; lg?: GridLine; xl?: GridLine; } | undefined | No | Starting grid line, including responsive values where supported. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
GridColumns, GridItemProps, GridProps, GridSpan, GridTrackCount
ts
export type GridColumns = 1 | 2 | 3 | "auto" | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;ts
export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;ts
export type GridTrackCount = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 7 | 9 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;Accessibility
- Grid and GridItem preserve normal DOM order; keep source order meaningful.
Token families
gridbreakpointscale