LAYOUT / COMPONENTS
Grid
Let content find its natural columns.
About grid
Use a minimum column width and fluid tracks. Columns collapse automatically without exceeding the viewport.
01
Anatomy
Shared parts, named consistently.
01
Design
02
Build
03
Review
- 1Container
Defines the component boundary, grouping, and visual hierarchy.
- 2Columns
Content or structure that supports the component’s purpose and reading order.
- 3Gutters
Creates structure and rhythm without adding unnecessary focus stops.
- 4Items
Content or structure that supports the component’s purpose and reading order.
Try the default
A working example with the shared V1 visual language.
01
Design
02
Build
03
Review
When to use
Use a minimum column width and fluid tracks. Columns collapse automatically without exceeding the viewport.
Source order stays intact; the grid does not create additional focus stops.