UX Encyclopedia

Layout, Spacing & Grids

Spacing systems

Try it — spacing tiers. One slider sets the base unit; within-component, related-element, and section gaps stay in ratio (1× / 2× / 6×). Consistent ratios are what make a layout read as "ordered" without a single border.
An 8-point spacing token scale: each step is a clear multiple, so any two values read as obviously different. space-1space-2 space-3space-4 space-5space-6 space-7 48 1624 3248 64 pick from the scale — never invent 13 px
Tokens on an 8-pt base (4 for fine adjustment). Multiplicative steps stay clearly distinguishable (Weber's law) — and every screen shares the same rhythm.
  • Use a base unit and stick to multiples: 8 pt/dp grid is the industry standard (Material explicitly; Apple and Fluent compatible), with 4 for fine adjustments. Benefits: rhythm, alignment across screens, fewer arbitrary decisions, clean scaling across densities.
  • Encode spacing as tokens (space-1…space-8) so AI/codegen and humans pick from a scale instead of inventing values.
  • Spacing communicates grouping (gestalt proximity): define at least three tiers — within-component, between related elements, between sections — and keep the ratios consistent (e.g., 8 / 16 / 48).
  • Put spacing on the layout (flex/grid gap, stack components), not on individual children's margins — margins on children leak, collapse, and double up when components are rearranged.

Grids

A 12-column grid with a header spanning twelve columns, a sidebar on three, content on six, and a rail on three — every block snaps to column edges. 12 columns · fixed gutters · outer margins header 12 · sidebar 3 · content 6 (cap the measure) · rail 3
Why 12: it divides by 2, 3, 4, and 6. Blocks span whole columns; text inside the content region still gets a 45–75ch max-width.
A bento grid that works: cell sizes encode priority, with the most important content in the largest cell. 1 size = real priority, one grid
Bento that works — the hero cell earns its size; every cell is self-contained.
A bento grid that fails: equal-importance cells and a crossing reading order leave the eye without an entry point. equal cells, ambiguous order
Bento that fails — a mosaic without priority is decoration; hierarchy rules still apply.
  • Column grids: 12-column is the web default because it divides by 2, 3, 4, 6. Typical margins/gutters: 16–24 px mobile, 24–32 px desktop (convention). Material specifies 4 columns (compact), 8 (medium), 12 (expanded) across window-size classes.
  • Content max-width: cap reading columns so line length stays ~45–75 characters (see Typography for Interfaces); full-bleed is for imagery and data canvases, not paragraphs.
  • Alignment: strong left edge (in LTR) for scanning; every element should align to something — stray edges read as errors (gestalt continuity).
  • Bento grids (2020s trend, popularized by Apple's marketing pages): a mosaic of mixed-size cards locked to one strict grid. Works when cell size encodes real priority and each cell is self-contained; fails when content is padded/truncated to fit cells, reading order turns ambiguous, or the mosaic collapses into a random single column on mobile. A style convention, not a usability principle — hierarchy rules still apply.

Modern CSS that changes layout design (web)

Container queries: the same card lays out horizontally in a wide main column and stacks vertically in a narrow sidebar. same card component adapts to its container, not the viewport
Container queries — spec components with their own size states; they then work in any column.
Aspect-ratio prevents layout shift: without it, text jumps down when the image loads; with reserved space, nothing moves. image loads → text jumps 16 : 9 reserved nothing moves give every media slot an intrinsic ratio (CLS)
aspect-ratio — reserve media space before it loads; the main layout fix for cumulative layout shift.
  • Container queries (@container, baseline in all major browsers since 2023): components adapt to their container's width, not the viewport. Design implication: spec components with their own size states ("card under 400 px: stack image above text") instead of tying every variant to global breakpoints — the same card then works in a sidebar, modal, or main column. Global breakpoints remain for page-level shell changes.
  • aspect-ratio: reserve space for images/embeds/video before they load — the main layout fix for cumulative layout shift (CLS, a Core Web Vitals metric). Give every media slot an intrinsic ratio.
  • Prefer intrinsic patterns (grid auto-fit/minmax, flex wrap) over hard-coded breakpoints for content that is just "cards that wrap."

Hierarchy of a screen

F-pattern scanning on a text-heavy page: two horizontal sweeps near the top, then a vertical strip down the left. text-heavy page → front-load lines and headings
F-pattern — a symptom of unformatted text: gaze hugs the top and left. Counter it with headings, bullets, and meaningful first words.
Z-pattern scanning on a sparse page: logo to navigation, diagonal through the hero, ending at the call to action. sparse hero page → CTA where the Z ends
Z-pattern — sparse layouts scan corner to corner; put the action where the sweep lands.
  1. One primary action per screen (visually dominant).
  2. F-pattern/Z-pattern scanning applies to text-heavy pages (see Attention, Scanning & Perception) — put critical info where scanning starts: top-left in LTR, first two paragraphs, headings.
  3. Above-the-fold still matters (users decide quickly whether to scroll), but users do scroll when the top promises value — design the fold as a trailer, not the whole movie. (NN/g scrolling studies.)

Density

The same table at comfortable density showing three rows and at compact density showing six rows in the same height. Comfortable — consumer Compact — pro tools same height, same data model — density matched to the job; ship both as a setting for work tools
Consumer apps breathe; dashboards and tables earn compact modes — Material and Fluent both ship density options for exactly this reason.
  • Offer density appropriate to the job: consumer apps breathe; pro tools (dashboards, tables) earn compact modes. Fluent 2 and Material both ship comfortable/compact density options — follow that pattern rather than one density for all contexts.

Common layout smells (diagnostic checklist)

One layout exhibiting five common smells: near-miss alignment, off-scale gaps, equal spacing between unrelated groups, a box nested in a box, and a button orphaned far from the table it acts on. 1 13px 22px 2 = gaps, 2 groups? 3 4 Apply 5 1 near-miss edge · 2 off-scale gaps · 3 equal spacing, no groups · 4 box-in-box · 5 control orphaned from its object
Five smells in one screen. Diagnose layout complaints against this list before adding instructions or more UI.
  • Near-miss alignment: edges 2–3 px apart that should share a line — reads as sloppiness, breaks continuity.
  • Arbitrary spacing values: more than ~3 distinct gaps visible in one view, or values off the scale (13 px, 22 px) — grouping becomes noise.
  • Equal spacing everywhere: within-group gap = between-group gap, so proximity communicates nothing (the most common cause of "feels cluttered").
  • Box-in-box nesting: cards inside cards inside panels; each layer of chrome subtracts contrast from the content. Prefer whitespace grouping.
  • Centered body text longer than ~2 lines: ragged both sides, hard return sweeps.
  • Controls orphaned from their objects: the button acting on a table living in another region of the screen (violates proximity/mapping).
  • Fold-cramming: shrinking everything to force it above the fold — yields uniform density and no entry point.
  • Full-width text on wide screens: no max-width, 150+ character lines.

Responsive layout logic (summary — details in Responsive Web Design)

Design content-out, not device-in: let the content's needs set breakpoints; use fluid grids and flexible media between them (Marcotte's original responsive triad: fluid grid, flexible images, media queries). Container queries now let components carry their own responsive logic with them.

Sources

  • Material Design 3 — Layout, spacing, window size classes (m3.material.io).
  • Apple HIG — Layout (developer.apple.com/design).
  • Microsoft Fluent 2 — Layout & spacing ramp (fluent2.microsoft.design).
  • Marcotte, E. (2010). "Responsive Web Design." A List Apart #306.
  • Müller-Brockmann, J. (1981). Grid Systems in Graphic Design. Niggli — the canonical grid text.
  • W3C CSS Containment Module Level 3 — container queries; MDN — @container, aspect-ratio (developer.mozilla.org).
  • web.dev — Cumulative Layout Shift (Core Web Vitals).
  • Nielsen Norman Group — scrolling & attention studies (nngroup.com).
↑↓ to navigate · Enter to open · Esc to close