Layout Systems

Layout systems create predictable spatial structure — layouts should remain flexible and maintainable.

01 — Purpose

Predictable spatial structure

Layout systems create predictable spatial structure — layouts should remain flexible and maintainable.

Grids, stacks, sidebars, and content widths repeat across every page. Layout systems turn those patterns into reusable primitives with tokenised spacing — not one-off pixel math per template.

See responsive strategy and the CSS standard for how layout primitives and the LSCSS layout layer are organised.

02 — Principles

Layouts adapt gracefully across contexts

CSS Grid, Flexbox, logical spacing, and reusable layout primitives.

  • CSS Grid — two-dimensional page and section structure
  • Flexbox — one-dimensional alignment, nav rows, toolbars, card footers
  • logical spacing systems — gap and padding from tokens, not ad-hoc margins
  • reusable layout primitives — container, stack, cluster, sidebar patterns

03 — Practice

Good layout systems

Compose pages from primitives; let components respond to container width.

  • centralise max-width and gutters — --content-gutter, container component
  • use gap instead of margin hacks between grid or flex children
  • pair viewport media with container queries for component-level reflow
  • prefer fluid grids — minmax(), fr, auto-fit over fixed columns
  • document layout patterns in architecture docs — when to use grid vs flex

04 — Avoid

Layout debt

Rigid pixels and nesting hacks break responsiveness and maintenance.

  • rigid pixel layouts — fixed 960px columns on all viewports
  • excessive nesting — wrapper divs for every alignment tweak
  • layout hacks — negative margins, transform nudges, clearfix relics
  • float-based layout for new work — use grid or flex
  • duplicate container rules per page — one primitive, many consumers

05 — Close

Layout is infrastructure

Invest in primitives once; stop reinventing page shells every sprint.

Audit new pages for layout duplication. Extract the third repeated sidebar pattern into a shared primitive with tokenised spacing.

See design tokens, container queries, and CSS performance.