Free Modular Grid Generator

A 6 × 8 field has 48 modules. The number of distinct rectangular blocks you can build from it is the number of ways to pick two of the seven vertical lines times two of the nine horizontal ones: 21 × 36 = 756. Nearly eight hundred possible element shapes from a grid most people would describe as tight.

That number is the argument for modular grids. The constraint is not on what shapes you can use; it is on where their edges fall. And since a reader perceives alignment rather than dimension, constraining the edges costs a designer almost nothing and buys the coherence that makes a multi-page publication read as one thing.

The gutter is handled differently here than in a column grid, and the reason is worth knowing. It is measured as a percentage of the short side and applied identically in both directions, so a vertical gutter and a horizontal gutter are the same physical size.

If they were each a percentage of their own axis, a 16:9 canvas would give a horizontal gutter nearly twice the vertical one, and the modules would stop reading as a family. Two elements separated by a wide gap in one direction and a narrow one in the other look like a mistake even when the underlying grid is regular.

The margin goes the other way: it is a percentage of each dimension separately. On a 1200 × 675 canvas a 6% margin is 72 pixels at the sides and 40.5 at the top and bottom. Same proportion, different absolute — which keeps the live area geometrically similar to the page, and that similarity is what makes a grid transfer between formats.

Choosing the field is the design decision. More columns than rows suits a wide format; more rows than columns suits a page. The default of 6 × 8 on a landscape canvas gives modules wider than they are tall, which is what you want for text that has to sit in them.

The modular grid overlay page traces this, and the page-layout overlays cover the family it belongs to. The historical thread runs through the Swiss school, and specifically through the problem that produced it: designing a magazine or a catalogue where hundreds of pages must feel like one publication while carrying entirely different content. The grid solves that by moving the consistency from the elements to their edges.

Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) is the standard text, and its modular examples are still the clearest demonstrations available. Karl Gerstner's work for Capital in the early 1960s is the fullest single application — a grid designed so that every possible element size was decided in advance, leaving the designer to choose between them rather than invent.

Massimo Vignelli's 1970 graphic standards manual for the New York City Transit Authority is the same idea applied to signage, and it demonstrates the property that makes modular grids valuable at scale: a system that different people can apply, years apart, and get consistent results from.

That is the real argument. A modular grid is not primarily an aesthetic device. It is a way of making a design decision once and having it hold across a publication, a team and a timescale — which is why it appears wherever design has to be produced at volume.

For a single page, a modular grid is more structure than the job needs, and the column grid tool is the better tool; vertical rhythm alone belongs to the baseline grid tool. The threshold is roughly when you have more than one page, or more than one person, or more than one revision.

The outer frame drawn around the live area is not decoration. It is the boundary the margin defines, and having it visible is what lets you judge whether an element bleeding past it is deliberate or accidental.

Elements that deliberately break the grid are part of the practice rather than a failure of it. A photograph running to the page edge, a pull quote crossing a gutter — these read as emphasis precisely because the rest of the page is regular. A layout with no grid has no way to make that gesture, because nothing is being broken.

The most productive use of an overlay like this is checking. Lay it over a finished page and look for elements that nearly span a block. A quarter-gutter of drift is invisible on its own and immediately obvious under a grid, and it is by far the most common layout error in work that was assembled by eye.

The second use is deciding a field by comparison. Set 6 × 8, look at the page, set 4 × 6, look again. The right field is usually obvious side by side and impossible to reason about in the abstract.

For image-heavy layouts the field determines the crop sizes, and that is a feature. An image that spans two columns by three rows has a fixed aspect ratio, so the decision moves from what shape to crop to how many modules the image deserves — which is a question about editorial weight rather than about geometry.

A note on print: the same grid at A4 and A3 is the same grid, because every setting is proportional. That is what lets a publication run a magazine and a poster from one system, and it is why proportional specification became standard long before screens made it necessary.

The grid draws over your image rather than exporting a fixed template because the interesting question is always about a specific page. Where the margin sits, whether an element aligns, whether the gutter is even — none of those can be judged on a blank sheet.

The export sizes itself from the paper format and the DPI you choose rather than from your screen. SVG keeps every line editable, which is what you want when the field becomes a guide layer in a layout application.

Everything runs in your browser. Images you load are never uploaded, because there is no server for them to reach. The drawing, the transform and the export all happen on your own machine.