# Layout Grid And Spacing > Use when a page, screen, slide, or document needs its column scaffold, margins, gutters, spacing rhythm, or alignment system defined. Do not use for hierarchy inside an established grid or for breakpoint behaviour; route those to composition or responsive layout. - Skill: `peterbamuhigire/layout-grid-and-spacing` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add peterbamuhigire/layout-grid-and-spacing` - Raw SKILL.md: https://api.skillmd.com/api/skills/peterbamuhigire/layout-grid-and-spacing/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: peterbamuhigire (https://skillmd.com/u/peterbamuhigire) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/peterbamuhigire/layout-grid-and-spacing --- # Layout, Grid And Spacing Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com. ## Use When - About to compose or recompose the layout of any artifact: a web page/landing page, an app or web UI screen, a dashboard, a DOCX/PPTX/PDF report or proposal, or a pitch-deck slide. - Deciding column structure, gutters, margins, section spacing, and where the reader's eye should land first. - A layout risks defaulting to the AI mean: an even grid of identical cards, everything centred, the same gap everywhere, and no focal point. - Reviewing an existing layout that feels "assembled" rather than designed and you need to give it deliberate structure and tension. ## Do Not Use When - The decision is purely *which typeface* — use `01-typography-and-fonts/font-selection-and-pairing`. (Set type, then lay it out here.) - The decision is purely *which colours* — use `02-color-brand-and-visual-identity`. - The work is a chart or table's internal design (axes, encodings, data-ink) — use the data-visualisation skill in this same category. This skill governs the *page-level grid the chart sits in*, not the chart's own marks. - A binding client/brand grid or template already mandates the structure — follow it and record it, but still apply the optical-alignment and focal-point hygiene below. ## Required Inputs | Input | Source | Required evidence | |---|---|---| | Artefact, dimensions, and delivery format | Approved brief or existing source | Representative page, slide, screen, or viewport bounds | | Ranked content inventory | Product owner, author, or content model | Blocks, relationships, and explicit importance order | | Type scale and existing tokens | Design system or typography decision | Named scale, spacing token set, or documented provisional values | | Binding template or brand constraints | Brand owner or supplied template | Source file, grid specification, and permitted deviations | - Artifact type and output format (web / UI / DOCX / PPTX / PDF / slide). - The content inventory: what blocks exist, and their relative *importance* (you cannot build hierarchy without knowing what should dominate). - The viewport/page range the layout must survive (breakpoints for web/UI; page or slide dimensions for documents). - The chosen type scale and spacing unit, if already set, from `doctrine/references/type-scale-and-spacing.md`. ## Workflow 1. **Pick ONE spacing unit and commit to it.** Use a **4pt or 8pt** base and express every gap, pad, and margin as a multiple of it (8 · 16 · 24 · 32 · 48 · 64 …). This is the same rhythm rule as `doctrine/references/type-scale-and-spacing.md` §Spacing rhythm — consistent multiples are what separate "designed" from "assembled." Mixing 13px here and 19px there is a slop tell. 2. **Lay a grid, then design *against* it.** Choose a column count appropriate to the medium (12 columns is a flexible web default; documents often read best on a strict **2–3 column** or a single wide measure). The grid is scaffolding, in the Müller-Brockmann sense — it exists so you can place elements with intent and, deliberately, *break* it for emphasis. A grid you never depart from produces the dead, even page; a grid you ignore produces chaos. Hold both. 3. **Decide the focal point before placing anything.** Every composition needs one element that wins — the largest, the most isolated, or the most off-centre. Name it. If everything is the same size and evenly spaced, there is no focal point and the eye has nowhere to enter: that is the single most common AI-slop layout failure. 4. **Build hierarchy from three levers, not one.** Combine **scale** (size jumps, per the type scale's ≥1.25 ratio and real 3×-class hero jumps), **space** (more whitespace *around* a thing reads as more important than the thing itself), and **alignment** (a shared edge groups elements; a broken edge separates them). Vignelli's discipline: a few strong relationships, ruthlessly repeated — not many timid ones. 5. **Introduce intentional asymmetry and tension.** Centre-everything is the safe, lifeless default. Following the Swiss/International Typographic tradition (Müller-Brockmann, Tschichold's asymmetric typography), shift weight off the centre line: a wide content column beside a narrow margin column, a hero pinned left with air to its right, an image bleeding off one edge. Asymmetry is what makes a layout look *authored* — a choice a templating tool would not make. 6. **Treat whitespace as active material, not leftover.** Negative space is a design element you place on purpose — to isolate the focal point, to group and separate, to set pace. Generous, *uneven* whitespace (tight where things relate, wide where they don't) signals confidence; uniform padding around everything signals a default. Do not "fill" empty space; earn it. 7. **Align optically, not just mathematically.** Numerically-equal coordinates often *look* wrong: a circle or triangle beside a square must overshoot the box to appear aligned; punctuation, bullets, and icons hang fractionally outside the text edge to look flush; large type needs negative side-bearing trims to sit on a margin. Trust the eye over the measurement (Lupton, *Thinking with Type*). Where baseline rhythm applies (long-form text/documents), snap leading to the spacing grid so lines across columns share a baseline. 8. **Make the breakpoints deliberate — but prefer letting the grid adapt itself.** For web/UI, the layout must be *redesigned* at each breakpoint, not merely reflowed: a 3-column desktop grid that collapses to a single stacked column of identical cards on mobile re-creates the slop pattern. Decide what the focal point and the asymmetry become at each width. Two 2026 tools reduce how many breakpoints you need: **container queries** (`container-type: inline-size` + `@container` — a component adapts to *its container*, not the viewport, so one block lays out correctly in a wide column and a narrow rail) and **intrinsic layout** (e.g. `repeat(auto-fit, minmax(min(100%, 16rem), 1fr))` reflows 1→N columns with *no* media query). Name them here; the sibling `03-layout-grid-and-composition/responsive-and-adaptive-layout` owns the depth (breakpoint strategy, fluid `clamp()`, the full intrinsic pattern library). For documents, decide how the grid behaves across page breaks and on the slide master. 9. **Run the anti-slop layout checklist** (below). If any item fails, fix before shipping. ## The Anti-Slop Layout Checklist (run every time) 1. One spacing unit (4pt/8pt), every gap a multiple of it — no arbitrary one-off values. 2. A named focal point — one element deliberately wins; the eye has a clear entry. 3. Hierarchy built from scale **and** space **and** alignment together, not size alone. 4. At least one intentional asymmetry / off-centre tension — not everything centred. 5. Whitespace placed *unevenly* and on purpose, not uniform padding everywhere. 6. Optical alignment applied where maths and the eye disagree (overshoot, hanging punctuation). 7. Each breakpoint/page state re-composed, not collapsed into a uniform card stack. If the content genuinely *is* a uniform set (e.g. a true catalogue grid), say so and still break the monotony with a featured/hero item, a varied span, or asymmetric framing — never ship a flat, evenly-spaced card field as the whole composition. ## Decision Rules | Condition | Choose | Wrong-choice failure | |---|---|---| | Repeated components need flexible placement | A consistent multi-column grid with named gutters | Freehand placement drifts and becomes costly to maintain | | Long prose dominates | One bounded reading column plus optional margin furniture | A 12-column UI grid creates fragmented reading and excess measure | | A fixed slide or cover needs emphasis | Sparse asymmetric scaffold with one deliberate grid break | Filling every cell removes tension and focal rank | | Existing brand template is binding | Preserve its grid and correct only optical defects | Reinvention breaks brand continuity and approval expectations | | Content relationships do not fit one spacing step | Use a base unit with a small documented semantic scale | Ad hoc gaps destroy rhythm; one identical gap destroys grouping | ## Capability Contract - Must inspect content and the current artefact; rendering or screenshot inspection is required before release sign-off. - Analysis and critique are read-only. Edit layouts or tokens only when implementation/remediation is requested, preserving binding templates and unrelated work. - May measure geometry and execute relevant rendering checks. Do not publish, purchase assets, or alter production systems without explicit authority. ## Degraded Mode - If content priority or output dimensions are missing, stop and request them; do not invent a grid that encodes false hierarchy. - If rendering is unavailable, return a dimensioned grid specification and mark optical verification pending. - If tokens are absent, propose provisional 4pt/8pt-derived values, clearly separated from approved tokens. - Recover from overflow or broken alignment by correcting the governing column/spacing rule, rerendering representative pages, and logging the retest. ## Quality Standards - Every placement resolves to a named column, edge, baseline, or intentional documented break. - Spacing communicates grouping and rank while surviving representative real content. - Evidence names the tested dimensions, overlay/measurement method, exceptions, and gate verdict. ## Anti-Patterns - **The uniform card grid:** N identical cards in an even N-column grid with one global gutter — the signature of auto-arrangement. No item leads, nothing is grouped. - **Everything centred:** every block centre-aligned down a single axis, because centring is the zero-decision default. Reads as a placeholder, not a composition. - **Identical gutters everywhere:** the same gap between unrelated and related elements alike, so grouping carries no meaning. - **No focal point:** uniform sizes and spacing, so the eye has nowhere to enter and no path to follow. - **Dead-centre symmetry as the only structure:** never departing from the grid; mistaking evenness for order. - **Whitespace as filler:** padding everything equally to "balance" rather than using space to signal importance and grouping. - **Pixel-true but optically wrong:** trusting equal coordinates over the eye on shapes, punctuation, and large type. ## Sourcing authority (the asymmetry rule) Grounds **only** in human design authority — never in an AI tool's layout suggestions, per `doctrine/design-doctrine.md` §2. Canonical sources for this skill: - **Josef Müller-Brockmann — *Grid Systems in Graphic Design*** — the grid as a discipline of intent; columns, fields, margins, and rhythm. - **Jan Tschichold** — asymmetric typography and the authored, off-centre composition. - **Massimo Vignelli** — a few strong, ruthlessly repeated relationships; the grid as a tool of clarity, not decoration. - **Ellen Lupton — *Thinking with Type*** — optical alignment, hierarchy, and whitespace as active material. When an AI tool happens to recommend a "12-col grid with even gutters and centred cards," treat that as evidence of the convergent mean to *avoid*, not as endorsement. ## Outputs | Output | Consumer | Evidence and acceptance | |---|---|---| | Grid and spacing specification | Designer and implementer | Dimensions, columns, gutters, margins, base unit, and alignment anchors are explicit | | Annotated layout/render | Reviewer and content owner | Grid overlay demonstrates intended relationships on representative content | | Layout gate record | Approver | Tested dimensions, checklist results, corrections, and unresolved constraints are recorded | - A stated layout decision: the spacing unit, the grid (columns/margins), the named focal point, the chosen asymmetry, and how each breakpoint/page state re-composes — declared **before** any markup, CSS, or document layout is produced. - A completed anti-slop layout checklist. - A layout that reads as deliberately authored, consistent with the Mission in `doctrine/design-doctrine.md` §0. ## Examples - `examples/grid-template-worked.md` — a real **12-column + 8pt** landing-page grid applied end-to-end: the stated decision (7+5 hero, 8+4 features, named focal point), copy-ready CSS Grid + spacing tokens, a container-query variant, re-composition at each breakpoint, and the anti-slop checklist run against it. Read this to see the workflow above turned into shippable layout. ## References - `references/grid-systems-catalog.md` (the named grid structures — manuscript, column, modular, 12/16-col, asymmetric, compound — with column/gutter/margin guidance, uneven-split ratios, and the CSS Grid mapping; also flags container queries / intrinsic layout and defers their depth). - `references/spacing-rhythm.md` (the operational **8pt scale**: tokens, the proximity law for *uneven* spacing, gutter vs. section spacing, baseline rhythm, and fluid `clamp()` spacing). - `doctrine/design-doctrine.md` (§0 Mission — "the moat is looking human-made"; §2 sourcing- authority asymmetry rule). - `doctrine/references/type-scale-and-spacing.md` (spacing-unit rhythm, type-scale ratios and real jumps, line-height, weight extremes — the numbers this layout's hierarchy is built on). - `03-layout-grid-and-composition/responsive-and-adaptive-layout` (sibling — owns the *depth* of container queries, intrinsic layout, breakpoint strategy, and fluid responsiveness; this skill owns the grid + spacing decision the responsive layer adapts).