LAYOUT / COMPONENTS
Grid item
Span the right number of columns at each breakpoint.
About grid item
Place GridItem inside a responsive Grid. Choose spans for the 4-, 8-, and 12-column scaffolding without changing reading order.
Anatomy
Shared parts, named consistently.
- 1Grid container
Defines the component boundary, grouping, and visual hierarchy.
- 2Column span
Content or structure that supports the component’s purpose and reading order.
- 3Content
Content or structure that supports the component’s purpose and reading order.
- 4Gutter
Creates structure and rhythm without adding unnecessary focus stops.
Try the default
A working example with the shared V1 visual language.
When to use
Place GridItem inside a responsive Grid. Choose spans for the 4-, 8-, and 12-column scaffolding without changing reading order.
Layout adds no focus stops. Source order remains reading order at every width.