Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Grids

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

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 page
  1. Definition
  2. Common column counts
  3. A grid that does not need a framework
  4. In practice
  5. Sources
  6. Continue from here
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.

In practice

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.

Sources

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

  • CSS Grid Layout

    MDN Web Docs

  • 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.

Often used with

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

Short definition

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

Related concept

Connected closely enough to change how you apply this.