domains / families / design / layout-grid

layout-grid

separate

Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`.

When to use

• establishing page structure
• defining responsive grid systems
• setting columns, gutters, and margins
• configuring breakpoint behavior
• choosing grid types
• applying responsive behavior patterns
• documenting grid specs

When not to use

• spacing scale inside components
• cross-device behaviour

Skill page

Source