Why Grids Exist

Every page has a grid. This is not a matter of choice — it is a matter of whether the grid is deliberate or accidental. A page where elements are placed by eye, adjusted until they look roughly right, nudged until the discomfort subsides: that page has a grid too, an implicit one, assembled from the accumulated residue of individual decisions. The difference between designed and undesigned pages is not the presence or absence of a grid. It is whether the grid was chosen before the content was placed, or discovered afterwards by someone trying to figure out why nothing quite lines up.

This chapter makes the case for the deliberate grid — not as a rule imposed from outside, but as a tool chosen from within, a spatial framework that makes every subsequent decision faster, more consistent, and more coherent. We trace the grid's history through five centuries of printing, examine the major grid structures available to document designers, and end with a framework for choosing the right grid structure for a specific document and its specific needs.

· · ·

The grid as a design decision Structure that enables rather than constrains

The most common misunderstanding about grids is that they are restrictive — that designing to a grid means accepting a predetermined structure and fitting content into it, sacrificing flexibility and expressiveness in the process. This misunderstanding gets the relationship exactly backwards. A grid does not restrict what you can do. It restricts what you have to decide.

Without a grid, every element placement is a fresh decision made in a void: where should this heading go? How far from the left edge? How much space above it? Each decision must be made from scratch, evaluated against everything else on the page, and adjusted until it feels right. The cumulative weight of these decisions is exhausting, and the accumulated approximations produce a page that feels restless even when it looks acceptable — because no two elements share the same underlying logic.

With a grid, these decisions are made once, in the abstract, before any content is placed. The column structure is defined. The margin proportions are set. The baseline unit is established. Every subsequent placement becomes an act of choosing from a small set of well-considered options rather than improvising from an infinite range of possibilities. The decisions become faster and the results more consistent, because every element is responding to the same underlying spatial logic.

This is what designers mean when they say that constraints enable creativity. The grid does not tell you what to put on the page. It tells you where things can go — and by answering that question in advance, it frees you to concentrate on what the content actually needs.

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

— Josef Müller-Brockmann, Grid Systems in Graphic Design

Müller-Brockmann's point about practice is worth pausing on. A grid is not a template that guarantees good layout. It is a spatial vocabulary that must be learned and used with judgment. Two designers working from the same grid will produce very different pages, because the grid specifies structure but not decisions within that structure — where emphasis falls, where space is left open, where elements break the grid deliberately for effect. The grid is the grammar; the design is the sentence.

· · ·

Historical context Five centuries of spatial thinking

The grid in typography is not a modern invention. Its roots reach back to the earliest days of printing, and tracing its history reveals something important: the problems the grid solves are not problems of style or fashion, but of the fundamental spatial logic of putting words on a page. Every era that has thought carefully about document design has arrived at some version of the same solution.

The manuscript tradition that preceded Gutenberg already used invisible structural guides — pricking and ruling the parchment with a stylus to define the text area, leaving consistent margins on all four sides, maintaining consistent line spacing throughout. The manuscript page was not laid out freely. It was structured by convention and physical constraint, and those constraints produced pages that remained readable and beautiful centuries later.

When Gutenberg designed the 42-line Bible in the early 1450s, he adapted the manuscript tradition to the new technology of movable type. The page proportions, the margin ratios, the relationship between the text column and the white space surrounding it — these were inherited from the scribal tradition, refined by the physical requirements of the printing press, and set with a precision that metal type made possible for the first time.¹ The result was a page that established typographic conventions still visible in well-designed books today.

The Renaissance printers — Aldus Manutius in Venice, Christophe Plantin in Antwerp — refined these conventions into what we now call classical page proportions: the text block positioned slightly above centre on the page, with the inner margin narrower than the outer, the head margin narrower than the foot, and the overall proportions derived from simple geometric ratios. These are not arbitrary choices. They are the result of centuries of observation about what makes a page comfortable to read and hold.

The twentieth century brought the grid into explicit, theoretical focus. Swiss designers of the 1950s and 60s — Max Bill, Josef Müller-Brockmann, Emil Ruder — codified the grid as a formal design tool, developed systematic approaches to multicolumn layout, and articulated the principles that underlie professional grid design to this day. Their work, particularly Müller-Brockmann's Grid Systems in Graphic Design (1981), remains the most rigorous treatment of grid theory available.

CSS Grid, introduced in 2017, brought this centuries-old spatial logic into the browser with a precision that had previously been impossible. For the first time, web designers could define explicit column and row structures, place elements at precise grid positions, and create layouts that responded to the same spatial thinking as print design. Combined with Paged.js, which brings the CSS Paged Media specification to the browser, the full tradition of typographic grid design is now available to anyone who knows HTML and CSS.

· · ·

Grid structures Single column, multicolumn, and modular

There is no single grid. There are grid structures, each suited to different kinds of content and different reading experiences. The three major structures relevant to document design are the single-column grid, the multicolumn grid, and the modular grid, and each embodies a different set of assumptions about how the content will be read and used.

The single-column grid is the most ancient and, for long-form reading, the most powerful. A single text column occupies the central portion of the page, with margins on all four sides providing breathing room and a place for marginal notes if the design calls for them. The reader's eye follows one clear path: down the column, from line to line, without interruption. There are no decisions about which column to read next, no lateral eye movement between parallel streams of information. Everything that needs to be communicated arrives in a single, sustained flow.

Single-column layouts are appropriate for books, essays, literary documents, and any content whose primary mode of consumption is linear reading. They are not appropriate for reference material, technical documentation, or any content the reader will scan rather than read — because a single column offers no spatial differentiation between kinds of information.

The multicolumn grid divides the page width into two or more columns, typically of equal width, with gutters between them. It allows more content per page, creates spatial complexity that can be used for hierarchy (main text in a wider column, notes or captions in a narrower one), and provides a structure for layouts that mix text with images or other non-text elements. Academic journals, magazines, newspapers, and technical documentation typically use two- or three-column grids.

The width of each column in a multicolumn grid is constrained by legibility: a line that is too short forces the eye to return too frequently, disrupting the reading rhythm. The classical guideline — 45 to 75 characters per line, with 66 as the ideal — determines the minimum useful column width for any given type size and typeface. At 12pt with a moderate-x-height serif face, this means a column width of approximately 70–90mm. A page narrower than this cannot sustain a two-column layout without sacrificing legibility.

The modular grid adds horizontal divisions to the column structure, creating a matrix of rectangular units — modules — that can be combined to place elements at precise positions on the page. Modular grids are most useful in complex editorial layouts where many different types of content — text, images, captions, data — need to coexist on the same page in a coherent spatial arrangement. They are overkill for most document design; the added complexity is only justified when the layout genuinely requires it.

· · ·

Choosing the right grid A framework for the decision

The choice of grid structure for a specific document should be driven by the content's nature, the reader's relationship to that content, and the physical format of the page. These three factors interact, and thinking about them in sequence usually produces a clear answer.

The content's nature: Is it primarily narrative, designed to be read linearly from beginning to end? Or is it primarily reference material, designed to be consulted non-linearly, with the reader moving between sections? Narrative content is best served by a single column, which maintains the sense of continuous flow. Reference content is better served by a multicolumn structure, which allows more information per page and provides spatial differentiation between levels of content.

The reader's relationship to the content: Will the reader sit with this document for an extended period, reading with close attention? Or will they scan it quickly, looking for specific information? Close reading favors a single, well-proportioned column. Scanning favors a structure that makes different types of information visually distinct — headings, body text, captions, notes — which a multicolumn layout can achieve more effectively than a single column.

The page format: The physical dimensions of the page constrain the grid. A narrow format — digest size, A5, or smaller — can rarely sustain more than one text column at readable type sizes. A wide format — A4 landscape, tabloid — may require two or three columns to keep line lengths from becoming ungainly. The grid must be sized to the page, not the other way around.

For The Compositor's Garden, the answers are clear: literary and essayistic content, designed for sustained close reading, in a 5.5 × 8.5 inch format. The single column with a generous outer margin is the correct grid — classical, appropriate to the content, and spacious enough to accommodate the marginal notes that appear in two of the chapters. The outer margin column is not a second text column; it is breathing room and annotation space, a formal device that echoes the manuscript tradition the book's content references.

· · ·

The grid is chosen. In Chapter 13, we build it in CSS — defining columns, gutters, and margins in grid-template-columns, establishing the spatial framework that every element in the document will inhabit. The abstract spatial thinking of this chapter becomes concrete code, and The Compositor's Garden acquires its physical structure for the first time.