Layout Overview

Layout provides a small set of composable building blocks for common page, app, and content structure. It is not a utility-first framework, and the twelve-column canvas it does ship (.column-layout) is an opt-in vocabulary for deliberate composition rather than the default way to build a page.

• Layout classes compose components; components do not own page spacing.
• Use custom properties to tune a layout instance.
• Prefer intrinsic and container-friendly behavior over breakpoint-heavy APIs.
• Keep class names semantic enough to remember and generic enough to reuse.
• Add a new layout primitive only when a pattern appears often and is awkward to express with existing primitives.

See Choosing a layout for the distinctions between responsive collections, fixed structural grids, all-or-nothing peer regions, sidebars, and explicit column placement.

Child contract

Layout primitives operate on the boxes generated by their direct children. Applying display: contents to a participating child removes that box and promotes its descendants into the parent layout, bypassing the sizing or placement assigned to the child. The layout contracts below are expressed against direct children — keep those children as real boxes unless you intend that bypass.

Spacing tokens

Layout shares the global spacing surface and exposes a small set of gap and rhythm tokens.

:root {
  --gap: 0.75rem;
  --space-10: 0.25rem;
  --space-20: 0.5rem;
  --space-30: 0.75rem;
  --space-40: 1rem;
  --space-50: 1.5rem;
  --space-60: 2rem;
}

Most layout primitives read --gap and allow local overrides.

.settings-form {
  --gap: var(--space-50);
}

Prefer a local custom property over adding many one-off utility classes. Use inline styles only for demos, prototypes, or truly dynamic values.

Set --gap locally to retune the primitive and its nested layouts. To change only one element's rhythm without reaching nested primitives, set the gap property instead.

Spacing expresses relationships

Components own their internal rhythm; layout owns the relationships between components.

Prefer a parent gap for relationships between peers instead of encoding sibling margins into a component. Smaller gaps imply a stronger relationship; progressively larger gaps distinguish groups and sections.

Before adding a divider or other separating chrome, consider whether additional spacing already expresses the boundary clearly.

Density changes the amount of space available, not the relationships that space communicates. When a composition contains local, group, and section rhythms, preserve their relative hierarchy with nested or local --gap values rather than relying on one inherited gap at every level. See Stack for the nesting and density mechanics.