'/%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
Responsive layout
Values per breakpoint for columns, spans, gaps and direction, Show and Hide, and hooks for the current breakpoint. All CSS, so the server and the browser render the same thing.
Ant Design: Row, Col, Grid.useBreakpoint
import { Grid, GridItem, Flex, Show, Hide, useBreakpoint, useMediaQuery } from '@alea/ui';
Examples
Columns per breakpoint
One column on phones, two on tablets, four on desktops. Resize the window.
Tokens
Components
Figma kit
Templates
12-column spans
Like Ant's Row and Col: the sidebar takes the full width on phones and 4 of 12 from md up.
Main
span base 12, md 8
Aside
span base 12, md 4
6 / lg 3
6 / lg 3
12 / lg 6
Direction, Show and the hook
Stacks on phones, lines up from md; Show swaps content with CSS; useBreakpoint reports where you are.
Current breakpoint: base
Shown from md up
Shown below md
Props
Flex props
A flex row or column whose direction and gap can change per breakpoint.
| 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. |
direction | Responsive<"row" | "column" | "row-reverse" | "column-reverse"> | 'row' | row or column, per breakpoint: { base: 'column', md: 'row' } stacks on phones and lines up on tablets. |
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. |
wrap | boolean | - | Wrap onto new lines. Default false. |
GridItem props
A cell of a Grid that spans several columns, like Ant's Col with xs/md/lg.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | The element to render. Default div. |
span | Responsive<number | "full"> | - | Columns it spans (of the grid's columns, usually 12), per breakpoint: { base: 12, md: 6, lg: 4 }. 'full' spans all. |
start | Responsive<number> | - | Column it starts at, per breakpoint. |
Show props
Shows its children only above or below a breakpoint, with CSS (no flash, same markup on the server).
| Prop | Type | Default | Description |
|---|---|---|---|
above | "sm" | "md" | "lg" | "xl" | - | Show from this breakpoint up. |
below | "sm" | "md" | "lg" | "xl" | - | Show below this breakpoint. |
Hide props
The opposite of Show: hides its children above or below a breakpoint.
| Prop | Type | Default | Description |
|---|---|---|---|
above | "sm" | "md" | "lg" | "xl" | - | Show from this breakpoint up. |
below | "sm" | "md" | "lg" | "xl" | - | Show below this breakpoint. |
Accessibility
- Show and Hide use display: none, so hidden content is hidden from screen readers too. Don't hide content people on phones need: rearrange it instead.
- Flex direction changes the visual order only; keep the DOM order the reading order.
Do and don't
Do
- Write mobile first: base is the phone, then add md and lg.
- Use Grid columns={12} with GridItem spans for page layouts.
Don't
- Don't use useBreakpoint for layout: the CSS props avoid a flash on load.
- Don't reverse the direction when the order carries meaning.