12 splits into halves, thirds, quarters and sixths without fractions — four layout rhythms from one grid. 8 gives you halves and quarters only; 9 gives thirds; 16 gives you a fifth option nobody uses. Pick 12 unless your content has a structure that argues otherwise.
| Columns | Divides evenly into | Column width @ 1440 | What it is good at |
|---|---|---|---|
| 8 | 2 · 4 · 8 parts | 145 px (40px gutter) | Editorial layouts. Wide, few columns, generous measure. Halves and quarters only, which keeps designers honest. |
| 9 | 3 · 9 parts | 142.22 px (20px gutter) | Thirds without fractions. Galleries, card rows of three, anything that repeats in threes and never in halves. |
| 12 | 2 · 3 · 4 · 6 · 12 parts | 92.5 px (30px gutter) | Everything else. Halves, thirds, quarters and sixths from one system. The reason it became the default. |
| 16 | 2 · 4 · 8 · 16 parts | 67.5 px (24px gutter) | Dense product UI where you need eighths. Buys one extra split over 8 and loses thirds entirely. |
Why 12 won
Divisibility is the whole argument. A grid is useful when the layouts you want are expressible as whole columns, because half a column is a number you have to invent and then remember. 12 divides into 2, 3, 4 and 6 — so a 50/50 split, a three-up card row, a quarter-width sidebar and a six-up logo strip all land on the same lines. 8 cannot do thirds. 16 cannot do thirds either, and its extra eighths are a resolution nobody designs at.
That is the entire mechanism. It is not that 12 is a magic number; it is that 12 is the smallest number with four useful factors.
When 9 is the right answer
9 is the count people skip past, and it is the one with the sharpest use case: content that is always in threes. A portfolio grid, a three-column card layout, a magazine index. On a 9-column grid every third is exactly 3 columns and the arithmetic disappears. On a 12-column grid a third is 4 columns, which also works — but a 9-column grid physically prevents the halves that would break the rhythm.
That is a real design decision: choosing a grid that cannot express the layouts you do not want. It is the same logic as a type scale with no in-between sizes.
When 8 is the right answer
Long-form editorial. Fewer, wider columns mean text sits in a comfortable measure without you having to span 7 of 12 and explain why. At a 40px gutter, 8 columns on 1440 gives 145px columns — two of them plus a gutter is 330px, which is a well-behaved measure for body text at 18–20px.
The counts that follow on smaller canvases
A column count is not for life. The convention that holds up in practice is 12 / 8 / 4 — desktop, tablet, phone — with the gutter shrinking alongside. The alignment discipline survives the switch because the outer margin and the gutter stay proportional; only the count changes.
| Canvas | Columns | Gutter | Margin | Column width |
|---|---|---|---|---|
| Desktop — 1440 px | 12 | 30 px | 80 px | 79.17 px |
| Laptop — 1280 px | 12 | 24 px | 48 px | 76.67 px |
| Tablet — 768 px | 8 | 24 px | 32 px | 67 px |
| Phone — 390 px | 4 | 16 px | 20 px | 75.5 px |
Column width = (canvas − 2 × margin − gutter × (columns − 1)) ÷ columns. Set the gutter and the margin; the column width is the consequence, not the input. Those numbers exist so your design file and your build agree — do not hard-code them in CSS. Use repeat(12, minmax(0, 1fr)) with the same gutter and the browser reproduces the proportions at every width.
.layout {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 30px;
max-width: 1440px;
margin-inline: auto;
padding-inline: 80px;
}
/* A half, a third, a quarter — all whole columns */
.half { grid-column: span 6; }
.third { grid-column: span 4; }
.quarter { grid-column: span 3; }
@media (width < 48rem) {
.layout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-inline: 20px; }
.half, .third, .quarter { grid-column: span 4; }
}Questions
Is a 12-column grid still relevant with CSS Grid and flexbox?
Yes, but for a different reason than in 2016. You no longer need 12 columns to build a layout — grid-template-columns does that. You need them to make consistent decisions: a shared column count is what stops two designers on the same product choosing 63% and 65% for the same sidebar. The grid is a decision-reducing device now, not a construction technique.
What gutter should I use?
24–32px on desktop, 16–24px on mobile. Decide the gutter first and let the column width fall out of it. A gutter smaller than 16px stops reading as separation; larger than 40px and the columns stop reading as one system.
Do I need an outer margin as well as a gutter?
Yes, and it should be larger than the gutter — otherwise the outermost columns look like they are falling off the canvas. A common ratio is margin ≈ 2× to 3× the gutter on desktop.
Why do the 1440px templates come in 8, 9 and 12?
Because those are the three counts with genuinely different behaviour: 8 for editorial, 9 for thirds, 12 for general purpose. 10 and 16 are variations on 8; 6 is half of 12. Three files cover the field. All three are free to download.