Müller-Brockmann posters
The textbook modular layouts where image and information blocks lock into a shared field of cells.
Typography · columns × rows · Swiss tradition
The modular grid
Take a column grid, cross it with horizontal rows, and you get a field of rectangular modules — the most flexible structure in graphic design. The modular grid is what lets a catalogue, a timetable, a newspaper, or a photo gallery hold dozens of different elements in calm two-dimensional order. It is the Swiss designers' great organising tool and the direct ancestor of CSS Grid. Here is how it is built, where it came from, and how to use it as an overlay.
- Type
- Two-dimensional field grid
- Built from
- Columns × rows
- Tradition
- Swiss / programmatic
- Difficulty
- Intermediate
- Best for
- Content-dense layouts
- Also known as
- Module / field grid
See the modular grid on five layout categories
‹›
In a catalogue, each product photo and its caption fill a whole module; a hero image spans four. The shaded cells show content occupying complete modules with the gutters left as breathing space.
What the overlay shows
The overlay draws two sets of lines: vertical column edges and horizontal row edges, with gutters between them. Where the columns and rows cross, the page is divided into a regular field of rectangular cells — the modules. Each module is an addressable area you can fill, leave empty, or combine with its neighbours.
The power of the modular grid is that it controls placement in both directions at once. A column grid alone tells you where a text block starts and how wide it is; the modular grid also tells you where it starts and stops vertically, so an image, a caption, and a data table can all snap to the same field and align without fuss. As an overlay it lets you test whether every element fills whole modules and respects the gutters, rather than floating between cells.
It is worth being explicit about the two spacings the field contains. Between modules sit the gutters — the consistent channels that keep adjacent content from colliding — and these are part of the grid, not leftover space; halving a gutter to squeeze something in quietly breaks the system. Around the whole field sit the margins, which frame the page and, on a spread, govern how facing pages relate across the gutter. The habit that keeps it all coherent is to derive margins, gutters, columns, and row height from one base unit, so every dimension descends from a single number. When that holds, scaling the layout — or reflowing it for a smaller screen — is a matter of changing one value rather than re-judging every edge by hand. Empty modules count too: leaving a cell deliberately blank is how a dense field breathes, and the overlay makes those intended gaps easy to keep consistent.
The math, briefly
The field is the product of two one-dimensional grids:
columns (c) × rows (r) = c·r modules
module = (col width) × (row height), gutters between
row height = n × baseline unit
Two consistencies make it cohere. The column width and gutter come from the standard column-grid arithmetic — content width minus gutters, divided by the column count. The row height is set to a whole number of baseline units, so type inside any module still lands on the vertical rhythm.1 Once both hold, an element that spans, say, two columns by three rows is a clean rectangle whose every edge lies on the grid, and CSS Grid expresses exactly this with grid-template-columns, grid-template-rows, and span placement.7 The maths is bookkeeping; the design judgement is choosing how many modules and how to span them.
History — where it comes from
Verified
Swiss origins. The modular grid is the most ambitious product of mid-century Swiss design. Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) sets out the construction in full, treating the module field as the basis of rational, repeatable layout.1 Karl Gerstner's earlier Designing Programmes (1964) reframed the grid as a programme — a flexible system of rules that could generate many specific layouts, anticipating the parametric thinking of modern design systems.2
Editorial and corporate adoption. Allen Hurlburt's The Grid (1978) brought the modular system to newspaper and magazine practice,3 and Massimo Vignelli made the grid a signature of corporate identity work — the modular discipline behind Knoll, American Airlines, and the New York subway materials is set out in The Vignelli Canon.4
The web inheritance. CSS Grid, standardised in the 2010s, is a direct descendant: it defines explicit columns and rows and places items across module spans, making the Swiss modular grid the native layout model of the modern web.7
Honest caveats
It is a tool, not a virtue. A modular grid does not make a layout good; it makes a complex layout consistent. Lisa Roberts and Julia Thrift's survey of working designers shows how widely the same grid can be used well or badly.8
Complexity has a cost. Too many modules produce fussy, over-engineered layouts; the grid should be as coarse as the content allows. Timothy Samara is explicit that the grid exists to be broken when the material demands it.5
When to use it (and when not)
| If you want to... | Use the modular grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Lay out a catalogue or product listing | Each item fills a module; the field keeps them aligned | A single flowing essay (use a manuscript grid) | Intermediate |
| Mix images, captions, and data in one page | Two-dimensional control aligns different content types | A single hero image with a headline | Intermediate |
| Build a responsive web layout | CSS Grid maps directly to modules and spans | Pure long-form reading pages (a column grid suffices) | Advanced |
| Design a dashboard or data view | Modules give cards and panels a consistent rhythm | Minimal, single-focus screens (over-structured) | Intermediate |
| Keep a multi-page document unified | One module field carries across every spread | One-off expressive posters (a freer grid serves better) | Intermediate |
Where the modular grid does its work
Six contexts. The Swiss and corporate uses are documented practice; the readings are analysis.
Vignelli corporate systems
Identity programmes whose every brochure and sign sits on one modular field — consistency as a corporate asset.
CSS Grid layouts
Responsive galleries and card layouts are modular grids expressed in code — the Swiss system reborn in the browser.
Newspaper front pages
Stories of different weights — lead, sidebar, brief — all align to one field, which is how a dense page stays readable.
Product dashboards
Cards, charts, and stats of different sizes share a module field so the interface reads as one coherent surface.
Museum & exhibition catalogues
Plates, captions, and essays of varying size are held in one rhythm so the book feels authored, not assembled.
Common mistakes
1
Too many modules
A very fine field gives so much freedom that the grid stops constraining anything, and layouts become fussy and inconsistent — the opposite of the grid's purpose.
Fix: use the coarsest field the content allows; add modules only when a real alignment problem demands them.
2
Rows that ignore the baseline
If row heights aren't whole baseline units, text inside the modules drifts off the vertical rhythm and the system fights itself.
Fix: set every row height to a whole multiple of the baseline unit so modules and rhythm agree.
3
Filling every module
Packing content into all cells produces a dense, airless page. Empty modules are part of the design — they are where the page breathes.
Fix: leave modules deliberately empty for white space and emphasis; the grid permits restraint as well as density.
4
Never spanning modules
If every element occupies exactly one module, the layout becomes monotonous and hierarchy disappears.
Fix: let key elements span several modules and minor ones a single cell so size signals importance.
How different disciplines use it
For editorial designers
The modular grid is the editorial designer's tool for complexity: catalogues, magazines, and reference books where images, captions, sidebars, and body text must all sit in order. Set columns and baseline-aligned rows, then place each content type into whole modules, spanning the important ones. The field lets a dense page stay legible and a multi-page document stay unified across spreads.
For web & UI designers
This is the grid that maps straight to code. CSS Grid defines columns and rows and places items across spans — the modular grid made executable. Use it for galleries, dashboards, and card layouts, keeping row heights on the baseline so type stays aligned. Designing in modules also makes responsive behaviour clearer: at smaller widths, you simply reflow the same modules into fewer columns.
For brand designers
Vignelli's lesson is that a single modular grid can carry an entire identity — every brochure, sign, and slide sharing one field reads as one voice. Define the module system once in the brand guidelines and the consistency comes almost for free, while still allowing enough span variation to keep individual pieces lively.
For students
The modular grid teaches two-dimensional thinking: not just where a column sits, but where every element starts and stops vertically too. Begin by reconstructing a Swiss poster's module field from the overlay, then design a simple catalogue page where every element fills whole modules. It is the most directly job-relevant grid to master, because it underlies both print systems and CSS Grid.
"The grid is the underwear of the book. You don't see it, but it gives shape to everything. The grid system is the basis of professionalism in design."
Massimo Vignelli, The Vignelli Canon (2010)4
Frequently asked questions
What is a modular grid?
A grid that divides a page in both directions — vertical columns crossed with horizontal rows — to create a field of rectangular modules. Content is placed into whole modules, which makes it the most flexible structure for complex, content-dense layouts like catalogues, tables, and image galleries.
How is a modular grid different from a column grid?
A column grid only divides the page vertically, controlling line length and where text columns sit. A modular grid adds horizontal divisions, so it also controls vertical placement. Every module is a defined cell, which lets you align images and text in two dimensions at once.
What is a module?
A single rectangular cell of the grid — the area bounded by one column width and one row height, with gutters separating it from its neighbours. Content occupies one or more whole modules; the gutters between them provide consistent spacing.
Where does the modular grid come from?
From Swiss design of the 1950s–60s. Müller-Brockmann codified the modular grid, and Karl Gerstner's Designing Programmes (1964) presented it as a flexible, programmatic system. Massimo Vignelli later made it a hallmark of corporate identity work.
How many modules should a grid have?
As many as the content needs and no more. More modules give finer control but more complexity; fewer give a calmer, blunter structure. A common start is a few columns crossed with several baseline-spaced rows, then adjusted to the material.
Should the rows match the baseline grid?
Usually yes. Aligning row heights to whole multiples of the baseline unit makes the modular grid and the vertical rhythm agree, so text inside modules still sits on the baseline and the whole system stays coherent.
Is a modular grid good for the web?
Very — CSS Grid is essentially a modular grid engine. Defining columns and rows and placing items across module spans is exactly how modern responsive layouts are built, which makes the modular grid the most directly transferable typographic grid to the web.
When is a modular grid overkill?
For simple, single-column running text — a novel, an essay, a long article — a manuscript or column grid is simpler and just as effective. The modular grid earns its complexity only when you have many different content types to align in two dimensions.
References
- Müller-Brockmann, J. Grid Systems in Graphic Design. Verlag Niggli (1981). ISBN 3-7212-0145-0.
- Gerstner, K. Designing Programmes. Arthur Niggli (1964). Reprint: Lars Müller Publishers (2007). ISBN 978-3-03778-090-8.
- Hurlburt, A. The Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books. Van Nostrand Reinhold (1978). ISBN 0-442-23992-3.
- Vignelli, M. The Vignelli Canon. Lars Müller Publishers (2010). ISBN 978-3-03778-225-4.
- Samara, T. Making and Breaking the Grid. Rockport Publishers (2002). ISBN 1-56496-893-6.
- Elam, K. Grid Systems: Principles of Organizing Type. Princeton Architectural Press (2004). ISBN 1-56898-465-0.
- Andrew, R. The New CSS Layout. A Book Apart (2017). ISBN 978-1-937557-58-3.
- Roberts, L. & Thrift, J. The Designer and the Grid. RotoVision (2002). ISBN 2-88046-538-X.
Notes from the studio · Three practitioners on the modular grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
For a 200-page catalogue I design the module field once and the whole book falls into place. The grid is what stops it becoming 200 separate decisions.
I sketch the dashboard in modules before I touch CSS Grid. The overlay and the code are the same picture, so handoff is trivial.
I make students rebuild a Müller-Brockmann poster from the field. Once they see the modules, they stop nudging things by eye forever.
Open the Modular Grid overlay
Drop a layout. Set columns and baseline-aligned rows and place content into whole modules. Free, in your browser.
Launch Grid Maker Pro →