Skip to content
UX Atlas
Plate FND·039 · UI foundationGrid C1 · Rev. 2026-08-14

Grids

A shared structure that makes alignment automatic and layout decisions repeatable.

UI foundationCraft conventionFoundational

Definition

A layout grid divides the available space into columns and gutters, giving elements a consistent set of positions to occupy. On the web, CSS Grid makes true two-dimensional grids available directly, which removes most of the historical reason for rigid twelve-column frameworks.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Common column counts
  3. 3A grid that does not need a framework
  4. 4Using a grid without being ruled by it
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Setting up a page layout system.
  • Building card and listing layouts.
  • Deciding between breakpoint-driven and intrinsic layout.
  • A page has several regions that must line up across different content lengths.

Common mistakes

  • Adopting a twelve-column framework where CSS Grid would be simpler.
  • Grids that do not account for the gutter at the edges.
  • Layouts that change at breakpoints when they only needed to reflow.
12 columns, 10px guttersspan 6span 4span 2Margins sit outside the first and last column, not inside them.
A twelve-column grid with gutters and margins. Twelve is conventional because it divides cleanly into halves, thirds, quarters and sixths.

Common column counts

ColumnsDivides intoTypical use
4Halves, quartersSmall screens.
6Halves, thirdsTablet.
8Halves, quartersSmall desktop.
12Halves, thirds, quarters, sixthsThe general-purpose default.
16Many divisionsDense application layouts.

A grid that does not need a framework

css
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(68rem, 100% - 2rem)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.page > * { grid-column: content; }
.page > .bleed { grid-column: full; }

/* Auto-fitting card grid: no breakpoints needed */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
}

Named lines create a content column with full-bleed capability. Items opt into the width they need rather than counting columns.

Using a grid without being ruled by it

Do

  • Let the content decide the column count, not the framework default.
  • Use intrinsic sizing for card rows, so items wrap when they need to rather than at a fixed width.
  • Keep the gutter from the spacing scale, so grid and spacing stay related.
  • Allow deliberate full-bleed elements to escape the grid, and define how.

Do not

  • Fit content to twelve columns because twelve is what was there.
  • Nest grids three deep to achieve an alignment that one grid would have given.
  • Treat the grid as a visual feature. It is scaffolding, and it should be invisible.

In practice

  1. i.

    Full-bleed sections inside a content grid

    Content pages

    Named grid lines let an image break out to the full viewport width while the surrounding prose stays in the readable column, without wrapper divs or negative margins.

  2. ii.

    The layout that needed no breakpoints

    Intrinsic over declared

    A card row using a minimum track width and auto-fill reflowed from four across to one without a single media query. The breakpoints that were removed had each been a place the layout could break.

Local chart

FND·039 · Region II · Grid C1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CardCMP·022 · APPLIED THROUGHWebflowTOOL·005 · OFTEN USED WITHSpacing SystemsFND·042 · OFTEN USED WITHGridTERM·068 · SHORT DEFINITIONGutterTERM·069 · SHORT DEFINITIONAlignmentFND·003 · RELATED CONCEPTBalanceFND·011 · RELATED CONCEPTBreakpointsFND·045 · RELATED CONCEPTColumnsFND·040 · RELATED CONCEPTCompositionFND·014 · RELATED CONCEPTContainersFND·041 · RELATED CONCEPTProportionFND·013 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    CSS Grid Layout

    MDN Web Docs

  2. [2]

    Grid Systems in Graphic Design

    J. Müller-Brockmann, Niggli, 1981

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

An Ecommerce Experience

Applied through

Where this shows up as a concrete interface decision.

  • CardCMP·022 · Component

Often used with

These usually appear in the same screen or the same decision.

  • WebflowTOOL·005 · Tool
  • Spacing SystemsFND·042 · UI foundation

    A grid without a spacing scale produces alignment with no rhythm.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.