'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
Stack, Inline, Grid
Space things out with the space scale: columns, rows that wrap, responsive grids, the page container and dividers.
Ant Design: Space, Flex, Grid, Layout, Divider
import { Stack, Inline, Grid, Container, Divider } from '@alea/ui';
Examples
Stack and Inline
Stack puts children in a column, Inline in a row that wraps. Gap comes from the space scale.
Stack with gap 4 (16 px)
Grid
columns="auto" fits as many columns as minItemWidth allows: responsive with no breakpoints.
Palette
Figma plugin
Contrast
Figma plugin
Type scale
Figma plugin
Color vision
Figma plugin
Tokens
Figma plugin
A11y
Figma plugin
Divider
A separator between groups, horizontal or vertical.
Above
Left
Right
Props
Stack props
Children in a column with even space between them.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | "stretch" | "baseline" | - | Cross-axis alignment: start, center, end, stretch or baseline. |
as | ElementType | 'div' | The element to render. Default div. |
gap | Responsive<Space> | 4 | Space between children, from the space scale. Default 4 (16 px). Can change per breakpoint. |
justify | "center" | "start" | "end" | "between" | - | Main-axis distribution: start, center, end or between. |
Inline props
Children in a row, wrapping by default.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | "stretch" | "baseline" | 'center' | Cross-axis alignment: start, center, end, stretch or baseline. |
as | ElementType | 'div' | The element to render. Default div. |
gap | Responsive<Space> | 2 | Space between children, from the space scale. Default 4 (16 px). Can change per breakpoint. |
justify | "center" | "start" | "end" | "between" | - | Main-axis distribution: start, center, end or between. |
wrap | boolean | true | Wrap onto new lines when there is no room. Default true. |
Grid props
A responsive grid: fixed columns, as many as fit, or a different count per breakpoint.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | The element to render. Default div. |
columns | Responsive<number | "auto"> | 'auto' | Columns: a number, 'auto' to fit as many as minItemWidth allows, or one per breakpoint: { base: 1, md: 2, lg: 4 }. Use 12 with GridItem spans for page layouts. |
gap | Responsive<Space> | 4 | Space between cells, from the space scale. Default 4 (16 px). Can change per breakpoint. |
minItemWidth | number | 240 | Smallest column width for columns='auto'. Default 240 px. |
Container props
Centers content at a max width with the page gutters.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | The element to render. Default div. |
size | "sm" | "md" | "lg" | "xl" | "full" | 'xl' | Max width: sm 640, md 768, lg 1024, xl 1280 (the default page width), full. |
Divider props
A thin rule between groups.
| Prop | Type | Default | Description |
|---|---|---|---|
spacing | 0 | 2 | 3 | 4 | 5 | 6 | 1 | 12 | 24 | 0.5 | 7 | 8 | 10 | 16 | 20 | 0 | Spacing around the line, from the space scale. |
Accessibility
- Layout components add no roles, except Divider, which is a separator.
- Pick the element with as (section, ul, nav) so the structure means something.
Do and don't
Do
- Use gap from the scale instead of margins on children.
Don't
- Don't use Grid for tables of data: use a table.