The 12 column grid in web design: halves, thirds, quarters and phones
The 12 column grid, web design's most common layout system, is popular for one arithmetic reason: twelve divides evenly by two, three, four and six. That lets one grid hold halves, thirds, quarters and sixths, and mixtures like a 2:1 split, without new measurements. On phones the columns don't shrink to slivers; elements span more of them until most take the full width.
Where column grids come from
Column grids come from print. Newspapers and magazines have long been laid out on columns, and mid-century Swiss designers, Josef Müller-Brockmann most famously in his book on grid systems, turned the grid into a deliberate method for ordering type and images. On the web, fixed-width grid frameworks such as the 960 Grid System offered 12 and 16 column versions, and Bootstrap's 12 column grid made the number a default for a generation of sites.
Why twelve
| Layout | Spans | Typical use |
|---|---|---|
| Full width | 12 | Hero, long text column (with its own narrower reading width) |
| Halves | 6 + 6 | Text beside an image, two plans |
| Thirds | 4 + 4 + 4 | Three services, team members, product cards |
| Quarters | 3 + 3 + 3 + 3 | Stats, logos, small product cards |
| Two to one | 8 + 4 | Article with a sidebar, form with a summary |
| Asymmetric | 7 + 5 or 5 + 7 | Editorial splits that feel less mechanical than halves |
A 16 column grid divides by two, four and eight but not three, which makes thirds awkward. A 10 column grid is good for fifths but not thirds or quarters. Twelve is the smallest number that handles the splits most sites use.
Margins, gutters and the container
- Container
- The maximum width the grid occupies, often somewhere between 1100px and 1300px, centred on wide screens.
- Margins
- The space between the container and the screen edge. On phones, 16px to 24px; it should never be zero for text.
- Gutters
- The gaps between columns, commonly 16px to 32px. Keep them consistent; they're what make the grid visible.
- Columns
- The flexible tracks. They should shrink and grow with the container, never be fixed widths.
Building it with CSS grid
CSS grid makes the 12 column grid a single declaration: grid-template-columns: repeat(12, minmax(0, 1fr)) with a column-gap for the gutter. Children choose their width with grid-column: span 4 and so on. The minmax(0, 1fr) matters: plain 1fr has a minimum based on content, so a long word or a wide image can push a column wider than its share and break the grid.
For many sections you don't need all twelve tracks. repeat(auto-fit, minmax(16rem, 1fr)) lays out cards in as many columns as fit, which handles responsiveness by itself. The 12 column grid is most useful for mixed layouts, where different elements in the same row have different widths.
Collapsing on phones
- Below roughly tablet width, quarters become halves (span 6) and thirds often become halves or full width.
- On phones, most elements span all 12 columns and stack. Only small items, such as stats or logos, stay two to a row.
- Decide the stacking order deliberately. In a 6 + 6 text-and-image row, does the image come first or the text? On a phone, the heading usually should.
- Prefer container queries where a component appears at different widths, so it adapts to its own space rather than the whole viewport.
WCAG 2.2's Reflow criterion (1.4.10) asks that content works at a width of 320 CSS pixels without scrolling in two directions, which a grid that stacks to one column handles naturally. Responsive design breakpoints covers where to change layouts.
When not to use one
A small site with a single column of text and a few images doesn't need a formal grid; a consistent container and reading width are enough. And a grid can be broken deliberately, with an image bleeding past the container or a heading crossing columns, as long as the rest of the page holds to it. Broken grid layout is about doing that on purpose.
Columns in Anticode
Anticode's layout editor works on columns. Its inspector can arrange a section as a grid of 1, 2, 3, 4, 6 or 12 columns, set how many columns each element spans, and set the narrowest column width. When you drag an element's edge to resize it, the new width snaps to whole columns; in a stacked section it snaps to common fractions such as a quarter, a third or a half. The layout is stored as constraints, never pixel positions, and a row only splits into columns once every element in it has room for its minimum width, so nothing overflows on a phone. Below that width, elements stack.
Questions people ask
Why is 12 columns the standard?
Twelve divides evenly into halves, thirds, quarters and sixths, so one grid supports most layouts without new measurements.
What happens to a 12 column grid on mobile?
Elements span more columns until most take all twelve and stack. Gutters and margins usually shrink a little too.
Do I need a grid system for a small website?
Not always. A consistent container, a reading width for text and a spacing scale do much of the same job on a simple site.