Swiss multi-column journal
Four equal columns and a single gutter, every block snapped to a column edge — the rational structure the column grid was systematised for.
Typography · vertical columns · editorial & web
The column grid
A page is a row of columns before it is a paragraph. The column grid slices the content area into equal vertical columns, holds them apart with a single gutter, and lets text and images fill one column or span several. It is the structure the eye reads sideways: it decides where a line wraps, where an image snaps, and how many ways a layout can be cut. Where the baseline grid sets the rhythm down the page, the column grid sets it across. Here is what the overlay draws, the maths of column width, the Swiss-to-web history, and how to use it.
- Type
- Vertical column grid
- Built from
- Columns · gutters · margins
- Tradition
- Swiss / editorial
- Difficulty
- Beginner
- Common counts
- 2 · 3 · 4 · 12
- Also known as
- Multi-column grid
See the column grid on five layout categories
‹›
In an editorial spread, four equal columns and one repeated gutter give the page its sideways structure — text fills a column, an image spans two, and every edge lines up.
What the overlay shows
The overlay draws three things: the outer margins that fix the content area, a set of equal-width vertical columns running the full height of that area, and the gutters — the even gaps between columns. Content does not have to honour the columns one-to-one; the point of the grid is that a block can fill a single column or span several, and as long as its edges land on a column boundary it stays in the system.
The number of columns is the decision that shapes everything else. A two-column grid offers a handful of layouts; a twelve-column grid subdivides into halves, thirds, quarters, and sixths, so one structure carries an entire publication. The count sets both the rhythm of the page and the number of moves available to you. Grid Maker Pro lets you set the column count, gutter width, and outer margins, then drop the overlay onto a reference image or a blank canvas to plan a spread or audit an existing layout for columns that have drifted off their edges.
It helps to see the column grid as the sideways counterpart to its horizontal partner, the baseline grid. The columns govern where blocks sit left to right; the baseline governs where the lines inside them rest top to bottom. Most considered layouts run both at once, and the overlay is most useful when you check the column edges first and the line alignment second.
The math, briefly
The column grid is built from three measurements — content width, gutter, and column count — and one formula ties them together:
w = (content width − (C − 1) × g) / C
where C = columns, g = gutter
span of n columns = n × w + (n − 1) × g
There is one gutter fewer than there are columns, which is why the formula subtracts (C − 1) gutters before dividing. To work out how wide a multi-column element is, add the column widths it covers plus the gutters caught between them. That second line is the whole craft of the column span: a quote across two columns, an image across four, a headline across all twelve.1
The reason 12 became the dominant count is pure arithmetic: 12 divides cleanly by 2, 3, 4, and 6, so a single grid yields halves, thirds, quarters, and sixths with no columns left over.3 That divisibility is what lets one structure serve a magazine's feature spread and its directory pages alike, and it is exactly the property the web inherited when the 12-column grid became standard.2 The arithmetic is simple; the judgement is choosing a count whose subdivisions match the content you actually have.
History — where it comes from
Verified
From one column to many. The single-column manuscript page is the oldest layout, and the medieval codex's move to two columns was the first multi-column grid in wide use. Newspaper printing pushed counts up to several narrow columns to pack text onto broadsheet paper, establishing the multi-column page long before it was theorised.
Swiss codification. The systematic multi-column grid was formalised by the Swiss / International Typographic Style in the mid-twentieth century. Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) is the canonical treatment, presenting the column grid as the basis of rational, objective layout.1 Allen Hurlburt's The Grid extended the system to the modular grids of newspapers and magazines, where columns crossed with horizontal divisions.3 Kimberly Elam's and Timothy Samara's books turned the column grid into standard design-school teaching.47 Jan Tschichold treated the page as a single unified field, arguing that consistent spacing across the text area is what holds a layout together — the discipline the column grid systematises.5
The Vignelli discipline and the web. Massimo Vignelli built an entire practice on a small number of grids applied without compromise, an approach set out in The Vignelli Canon.2 In the late 2000s the column grid migrated wholesale to the browser: the 960 Grid System and then Bootstrap's responsive 12-column grid made the multi-column structure the default mental model for web layout, and CSS Grid later made it native. Ellen Lupton's Thinking with Type presents the grid as standard teaching for working type into a structured layout, carrying the same multi-column thinking to a wide design and student readership.6
Honest caveats
More columns means more decisions, not just more freedom. A finer grid offers more ways to subdivide, but each option is one more judgement the designer has to make and justify. Samara is direct that the grid is a tool to be broken when the content demands it, not an end in itself.7
Narrow columns hurt readability. Dividing a page into many columns shrinks each one, and a column too narrow for a comfortable line length — roughly 50 to 75 characters — makes body text awkward to read.8 The grid that looks tidiest on the page is not always the one that reads best, and the column count has to answer to the measure, not only to the geometry.
When to use it (and when not)
| If you want to... | Use the column grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Lay out a magazine or newspaper | Equal columns and one gutter organise dense text and images | A single short block with no neighbours | Beginner |
| Structure a web page or product UI | A 12-column grid reflows into halves, thirds, and quarters | Free-form, art-directed one-off pages | Intermediate |
| Give a brochure flexible text-image fields | Spanning columns makes hierarchy without leaving the grid | Pure imagery with almost no text | Beginner |
| Keep many pages of a publication consistent | One grid carries every spread on shared column edges | Expressive layouts that change page to page | Intermediate |
| Audit a draft for misaligned blocks | The overlay reveals edges that miss a column boundary | Final responsive behaviour across breakpoints | Beginner |
Where the column grid does its work
Six contexts. The Swiss, editorial, and web uses are documented practice; the readings are analysis.
12-column web layout
The twelve thin columns body content spans in groups — a sidebar of three, a main of nine — the divisibility that made 12 the web default.
Two-column book index
A reference back-matter page set in two columns so short entries pack tightly while each line stays a comfortable length to scan.
Newspaper front page
Many narrow columns to maximise text on the sheet, with a headline and lead image spanning several to break the density.
Magazine feature spread
An image spanning two columns into a single field, with body text resuming in the remaining columns — the classic spanning move.
Dashboard layout
Cards sized to spans of a 12-column grid — three across one row, two across the next — so the panels align no matter how the data changes.
Common mistakes
1
Uneven gutters
Letting the gap between columns vary — wider here, tighter there — breaks the one rule that makes a column grid read as a single system. The page looks assembled from mismatched parts.
Fix: set one gutter value and use it between every pair of columns, then express spans as whole columns plus the gutters between them.
2
Too many columns for the content
Reaching for a 12- or 16-column grid on a layout that only needs three multiplies the decisions without adding anything the content uses.
Fix: choose the smallest count whose subdivisions match the layouts you actually need, and step up only when the content asks for finer control.
3
Columns too narrow to read
Splitting a fixed width into many columns shrinks each one, and a text column under roughly 50 characters a line forces the eye to jump back too often.
Fix: check the line length in each text column and let body copy span two or more thin columns if a single one is too tight.
4
Blocks that miss the column edges
An image or text box that ends partway across a gutter rather than on a column boundary reads as a small mistake the eye keeps catching.
Fix: snap every block to a column edge; if a block needs an odd width, change the grid rather than letting one element float off it.
How different disciplines use it
For editorial designers
The column grid is the editorial designer's first decision on any spread: how many columns, how wide the gutter, where the margins fall. Once that magazine grid is set, the work becomes spanning — an image across two columns, a standfirst across three, a sidebar in one — so that variety comes from the moves within a fixed structure rather than from a new layout every page. A magazine that holds one column grid across its run reads as a single voice; one that improvises every spread reads as noise.
For web designers
On the web the column grid is usually a 12-column structure expressed in CSS Grid or a framework, and the extra concern is responsive columns: the same grid that gives a sidebar and a main column at desktop width collapses to a single column on a phone. Use the overlay to plan how content spans the twelve columns at full width, then decide how those spans regroup as the grid narrows. The discipline is keeping each column span intentional at every breakpoint instead of letting it reflow at random. For the web-specific conventions of this structure, see the dedicated 12-column grid entry.
For book designers
Most book interiors are a single column — the manuscript grid — but reference works, textbooks, and back matter lean on two- and three-column grids to fit dense, scannable content. The judgement is the measure: each column has to stay wide enough for a comfortable line, so the count answers to readability before geometry. Indexes, glossaries, and bibliographies are where the multi-column grid earns its place in a book.
For students
The column grid is the easiest grid to learn and the most widely transferable. Start by overlaying it on a magazine or a well-built web page and counting the columns each block spans; the structure becomes visible almost at once. Then build a simple layout where every block lands on a column edge and the gutter never changes. The habit of designing in spans carries straight into editorial, web, and UI work.
"The grid is the underwear of the book. You wear it, but it's not to be exposed."
Massimo Vignelli, The Vignelli Canon (2010)2
Frequently asked questions
What is a column grid?
A layout structure that divides the content area into equal-width vertical columns separated by gutters, with margins on the outside. Text and images fill one or more columns, so everything snaps to a shared set of vertical edges. It sets the sideways rhythm of a page, where the baseline grid sets the rhythm down the page.
How do I work out column width?
Take the content width, subtract the total gutter space, then divide by the number of columns. With C columns and gutter g, each column is (content width − (C−1) × g) ÷ C. The width of a span across n columns is n column widths plus the (n−1) gutters in between.
Why are 12-column grids so common?
Because 12 divides evenly by 2, 3, 4, and 6, a single 12-column grid yields halves, thirds, quarters, and sixths without leftover columns. That divisibility gives the most layout options from one structure, which is why 12 became the web standard through the 960 Grid System and Bootstrap.
What is the difference between a column grid and a baseline grid?
A column grid runs vertically — equal columns the text fills sideways — and controls horizontal alignment. A baseline grid runs horizontally — evenly spaced lines set to the leading — and controls vertical rhythm. They are partners: columns place the blocks, the baseline aligns the lines inside them.
How wide should the gutter be?
Wide enough that adjacent columns read as separate, narrow enough that they still feel like one page. Print magazines often use a gutter of a few millimetres; web 12-column grids commonly use 16 to 24 pixels at desktop widths. Consistency matters more than the exact value: use one gutter everywhere.
How many columns should I use?
Match the column count to the content and reading mode. Books use one column; magazines two to four; newspapers five to eight narrow columns; web layouts usually a 12-column grid that body text spans only part of. Keep the line length in each text column to roughly 50 to 75 characters for comfortable reading.
Can I break the column grid?
Yes, and a well-judged break creates emphasis precisely because the grid is consistent everywhere else — a pull quote crossing two columns, an image bleeding past the margin, a headline spanning the full width. The break only reads as deliberate once the reader has settled into the grid.
Does the column grid apply to the web the same way as print?
The idea carries over directly, but the web adds responsiveness: a 12-column grid at desktop width often collapses to fewer columns, or to one, on a phone. CSS Grid and frameworks express the column structure as code, so the same grid reflows rather than staying fixed like a printed page.
References
- Müller-Brockmann, J. Grid Systems in Graphic Design. Verlag Niggli (1981). ISBN 3-7212-0145-0.
- Vignelli, M. The Vignelli Canon. Lars Müller Publishers (2010). ISBN 978-3-03778-225-9.
- Hurlburt, A. The Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books. Van Nostrand Reinhold (1978). ISBN 0-442-24817-8.
- Elam, K. Grid Systems: Principles of Organizing Type. Princeton Architectural Press (2004). ISBN 1-56898-465-0.
- Tschichold, J. The Form of the Book. Hartley & Marks (1991). ISBN 0-88179-116-4.
- Lupton, E. Thinking with Type. Princeton Architectural Press (2004). ISBN 978-1-56898-448-3.
- Samara, T. Making and Breaking the Grid. Rockport Publishers (2002). ISBN 1-56496-893-6.
- Bringhurst, R. The Elements of Typographic Style. Hartley & Marks (2004). ISBN 0-88179-206-3.
Notes from the studio · Three practitioners on the column grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
My first decision on any spread is the column count. Get that right and the rest of the issue lays itself out in spans.
Twelve columns, one gutter, and I plan every breakpoint as a regrouping of the same spans. The grid never changes; only how it folds.
I overlay the grid on a real magazine and have students count the columns each block spans. They stop guessing and start designing in fields.
Open the column grid overlay
Drop a layout. Set the column count, gutter, and margins, and check every block against the column edges. Free, in your browser.
Launch Grid Maker Pro →