Why do layout grids use 12 columns?

Divisibility — 12 splits evenly into halves, thirds, quarters and sixths, so most layouts map onto it without fractions. Narrower screens need fewer options, which is why 4 columns on mobile and 8 on tablet became the working convention.

What are standard breakpoints?

Values near 768px and 1200px recur across systems, but the honest rule is that content sets the breakpoints — you add one where the layout starts to fail, not where a device chart says to.

How wide should gutters be?

Commonly 16px on phones and around 24px on larger screens — proportionally, roughly a quarter to a third of a column's width, and never wider than the page margin, or the layout leaks at its edges.

Do I still need a grid system with CSS Grid?

Not as a framework — display:grid replaced the class-based row/column machinery. But as a design system — agreed columns, gutters and margins per breakpoint — yes: the CSS got easier, the design decisions didn't disappear.

What container max-width should I use?

One that keeps text columns readable — commonly 1100–1400px. Compute it from the layout: columns × column width + gutters + margins, checked against the line-length your body text can carry.

How do grid values become tokens?

As a layout section — breakpoints with min-width, columns, gutter and margin per tier, plus the container width — exported alongside color and type so layout ships from the same source as everything else.

Layout Grids & Breakpoints: The Practical Guide

A layout grid is the page’s horizontal contract: an agreed number of columns per breakpoint, with fixed gutters between them and margins around them, that every screen composes against. The 12-column desktop grid — 8 on tablet, 4 on phone — is the working convention of modern interface layout, and this hub collects our guides on using it with today’s CSS; the fastest orientation is the three-breakpoint grid, live.

The grid outlived the frameworks

The class-based grid frameworks died when CSS Grid shipped — nobody needs col-md-6 machinery anymore. What survived is the design layer: teams still agree on columns, gutters and margins, because layouts built by many people over many months need a shared skeleton to stay related. The guides here treat the grid as that agreement, implemented in a few lines of modern CSS instead of a framework. The intuitive reason the agreement survives is that alignment reads as intent: elements sharing edges look deliberate, dozens of slightly different widths look accidental, and a shared column set makes the first the default rather than an act of vigilance. What is a 12-column grid makes the case from zero — why twelve, what its divisibility buys — and building the grid in pure CSS shows the modern implementation: a few custom properties and one display: grid rule where the framework used to be.

Three numbers per breakpoint

Each tier of the grid is columns, gutter and margin — and the arithmetic ties them: fixed gutters and margins come off the container, columns share the rest. Our guides cover the trio’s proportions, why column counts drop on smaller screens, where breakpoints actually belong (content, not devices), and the container width that keeps text readable — with the line-length reasoning from our typography guide doing the binding. 4, 8, 12: columns per breakpoint explains why the count drops on smaller screens — fewer sensible layouts, not different math; breakpoints: content over devices argues for adding a tier where the layout starts to fail rather than where a device chart says to; choosing a container max-width computes the ceiling from the columns themselves; and fixed vs fluid columns settles what stretches and what stays put between tiers.

Composing on the grid

An agreed grid only earns its keep when content lands on it, and real layouts rarely fill twelve equal cells. Column spans and nesting covers the mechanics of elements taking four, six or eight columns — and of grids inside grids, where most span mistakes are made. Some sections need to escape the container entirely, which is the full-bleed problem: edge-to-edge color behind content that still aligns to the columns. On the design-tool side, layout grids in Figma mirrors the same tiers, so mockups and CSS measure against one skeleton instead of two approximations of it.

One scale, including layout

The same scale that spaces type and components can step the grid’s measures: gutters and margins as steps from the same spacing scale, the layout tokens exported beside color and type. Grid decisions stop being a separate dialect — which is the same single-source story told in design tokens, extended to the page’s skeleton. That is how Scale Composer treats layout: breakpoints, columns, gutters and a global container width live beside the color and type views, stepped by the one scale that drives all three, and land in the same tokens file at export.

Guides in this hub

4, 8, 12: Columns per Breakpoint
Responsive grid columns drop from 12 to 8 to 4 as screens narrow, because a grid only guides when one column is a usable size — with worked math per tier.
Breakpoints: Content over Devices
CSS breakpoints belong where the layout fails — line length, starved sidebars, cramped cards — not on a device chart. Why near-standard values still work.
Building the Grid in Pure CSS
A css grid system in about twenty lines: custom properties carry each breakpoint's decisions, three classes consume them, and spans clamp per tier.
Choosing a Container Max-Width
Container max width, explained: why layouts cap near 1200px, the reverse arithmetic from a readable text column, and when a fluid layout is right.
Column Spans and Nesting
How grid column span works: the span grammar, page patterns like 8+4 and 4+4+4, choosing spans by content and alignment, and nesting grids cleanly.
Fixed vs Fluid Columns
Fixed vs fluid grid: most modern layouts keep gutters and margins fixed while columns flex between breakpoints — what each model buys, with real numbers.
Full-Bleed Sections Inside a Container
Full bleed CSS without leaving the container: how heroes and media bands escape the max-width while their content stays on the grid — two modern patterns.
Setting Up Layout Grids in Figma
Set up a figma layout grid per breakpoint: stretch columns with fixed gutters and margins, saved as grid styles, with the numbers matched to code.
What Is a 12-Column Grid?
A 12 column grid divides the page into twelve equal columns with fixed gutters. Why twelve wins: halves, thirds, quarters and sixths all land on whole columns.

Move the grid and watch the page

Grid proportions teach fastest under the arrow keys: step the gutters and margins through the scale — 4, 8 and 12 columns per breakpoint inside a global container — and watch the layout tighten and breathe one step at a time. Ten seconds of stepping explains gutter proportion better than any diagram.