Flex · Grid · Container Atom
Layout primitives whose gaps can only be spacing tokens. That single constraint is why the library
has no style={{ padding: 13 }} anywhere.
Flex
gap 2
gap 2
gap 5
gap 5
<Flex direction="row" gap={4} align="center" justify="between"><Text>Left</Text><Text>Right</Text></Flex>| Prop | Type | Default | Notes |
|---|---|---|---|
| direction | 'row' | 'column' | 'column' | Flex direction. |
| gap | 0 – 8 | 4 | Spacing token step, not pixels. |
| align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | Cross-axis alignment. |
| justify | 'start' | 'center' | 'end' | 'between' | 'start' | Main-axis distribution. |
| wrap | boolean | false | Allows items to wrap onto a new line. |
Grid
Fixed columns collapse on their own below 900px and 560px. Pass minItemWidth instead when the
count should follow the content rather than the breakpoint.
auto-fit
auto-fit
auto-fit
<Grid minItemWidth="14rem" gap={4}>{items.map((item) => <Statistic key={item.id} {...item} />)}</Grid>Do
Use minItemWidth for card grids whose count varies with data.
Don't
Hard-code columns={4} for a list that might hold two items — the row will look broken at low counts.
Container
sm 40rem · md 56rem · lg 76rem · full. Centres content and applies the page gutter.