Children in a column with even space between them, the most common layout there is, with the gap taken from the spacing scale.
Item 1
Item 2
Item 3
Gap 5
Gap 5
Gap 5
Tier 1 · CSS only
Layout
preview
Components
Layout
The space between things. A few primitives that arrange any content, wrap on small screens without breakpoints, and take their gaps from the spacing scale.
Children in a row that wraps when it runs out of room, for tags, button rows, toolbars and headers with an action on the far side.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Start
End
One
Two
Pushed
Tier 1 · CSS only
Layout
preview
Equal columns that fill the row and wrap on their own, with no breakpoints, for groups of cards, tiles and form fields.
Card 1
Supporting text.
Card 2
Supporting text.
Card 3
Supporting text.
Card 4
Supporting text.
Card 5
Supporting text.
Card 6
Supporting text.
1
2
3
4
5
6
7
8
Tier 1 · CSS only
Layout
preview
A narrow side beside a wide main area, such as filters next to results, that stacks by itself when there isn't room for both.
Side
Main
Main
Side (end)
Tier 1 · CSS only
Layout
preview
A centred column with a maximum width and side gutters that never drop below 16px, for page bodies and readable text.
sm: 40rem, centred, with gutters
Prose containers keep a line to about seventy characters, which is a comfortable length to read. Text wider than that gets tiring, because the eye has further to travel back to the start of each line.
Tier 1 · CSS only
Layout
preview
A quiet rule between sections, across or upright, with an optional word in the middle such as "or".
Section one
Section two
or
Item
Item
Item
Item
Item
Tier 1 · CSS only
Separator
preview
Planned for this page
- Scroll area
- Aspect ratio