How many columns should a grid have?

Twelve is the common default because it divides by 2, 3, 4, and 6, which covers most layout splits. The number matters less than the consistency; a four-column grid used everywhere beats a twelve-column grid overridden on half the screens.

What is the difference between a fixed and a fluid grid?

A fixed grid holds column widths constant and lets margins absorb the change; a fluid grid lets columns stretch with the viewport. Most products use fluid columns inside a maximum container width, so wide screens do not produce line lengths nobody can read.

Do product interfaces need a grid?

Less than marketing pages do. Application layouts are usually driven by fixed sidebars and flexible content panes rather than columns, so the useful structure there is a spacing scale and consistent container widths rather than a twelve-column overlay.

What is a baseline grid?

A horizontal rhythm where text sits on evenly spaced lines, borrowed from print. It is demanding on the web because components have varying line heights, and most teams get the useful part of it from a consistent spacing scale instead.

How should a grid change across breakpoints?

Column count, gutter, and margin all change, not just the container. Twelve columns on desktop, eight on tablet, four on mobile is a common progression, with smaller gutters and margins as the viewport narrows.

Grid System

The columns, gutters, and margins a layout is built on — the structure that decides where things can go before anybody decides what goes there.

Deliverables & Artifacts

A grid system is the columns, gutters, and margins a layout is built on. It decides where things can go before anybody decides what goes there.

Four parts: columns (the vertical divisions), gutters (the space between them), margins (the space outside), and the container (the maximum width the whole thing occupies).

Twelve columns, and why

Twelve divides by 2, 3, 4, and 6, so halves, thirds, quarters, and sixths are all available without fractional columns. That is the entire argument, and it is a good one.

It matters less than consistency. A four-column grid used on every screen produces a more coherent product than a twelve-column grid overridden whenever something does not fit.

Fluid columns, fixed container

Fixed grids hold column widths constant and let margins absorb viewport changes. Fluid grids let columns stretch.

Most products use fluid columns inside a maximum container width, typically somewhere between 1200 and 1440 pixels. The cap exists because text that stretches the full width of a 27-inch display produces line lengths nobody can track — the readable range is roughly 45 to 75 characters, and a fluid text column at 2000 pixels is well past it.

Breakpoints change more than the container

The common mistake is scaling only the container width and leaving twelve columns in place on a phone, where each column is 20 pixels and the grid describes nothing.

A working progression:

Desktop. 12 columns, 24px gutters, 48px margins.

Tablet. 8 columns, 16px gutters, 32px margins.

Mobile. 4 columns, 16px gutters, 16px margins.

Column count, gutter, and margin all move together, and the values come from the spacing scale rather than being invented per breakpoint.

Application layouts are a different problem

Marketing pages benefit from a column grid. Product interfaces mostly do not.

An application layout is usually a fixed sidebar, a flexible content pane, and sometimes a detail panel. None of those are column-derived, and imposing a twelve-column overlay on them produces a grid that every screen overrides.

What application layouts need is a consistent spacing scale, a set of standard container widths, and rules about panel behaviour at narrow viewports. That is the equivalent structure, and it is not a grid.

Baseline grids

Horizontal rhythm, where text across columns sits on the same invisible lines. It comes from print, where it is achievable, and it is demanding on the web, where components carry varying line heights and images have arbitrary dimensions.

Most teams get the useful part — text that does not look randomly offset between adjacent blocks — from a consistent spacing scale and line heights that are multiples of a base. Full baseline alignment is a large amount of effort for a benefit few people perceive.

In practice

A marketing site is built on a twelve-column grid, and each new landing page takes longer than the last because sections do not line up between pages.

The cause is that the grid exists in the design file and not in the code. Sections were built with ad hoc padding, so the column positions in the design never survived into the build, and every page drifted a few pixels differently.

Implementing the grid as a container component — one that applies the margins, the gutter, and the column count per breakpoint — removes the drift. Page authors compose sections inside it rather than reproducing the measurements.

The grid did not change. It became the thing being built with rather than a reference image.

Where teams get it wrong

Twelve columns on a phone. A grid that describes nothing.
Only the container changing at breakpoints. Gutters and margins left behind.
No maximum width. Unreadable line lengths on wide displays.
A column grid on an application layout. Overridden everywhere.
The grid in the design file only. Measurements that never reach the build.
Chasing a baseline grid. High effort, little perceived benefit.

Learn more

Design system service →