Free Column Grid Template Generator

The margin comes first because everything else is measured inside it. What the margin does is state how much of the physical page is live, and the answer has always been less than people expect. Medieval manuscripts commonly gave over half the page to margin, and printed books through the nineteenth century were rarely below a third.

The compression of margins is a twentieth-century phenomenon driven by paper cost and, later, by screens where the page has no physical edge to respect. The default here — 8% each side, leaving 84% live — is a screen-era figure. For a printed book it would be very tight.

The column count is the number people fixate on and it matters less than what it divides by. Twelve is the web standard because it factors into 2, 3, 4 and 6, so a twelve-column grid supports halves, thirds, quarters and sixths from one structure.

Sixteen is more flexible still on paper and less useful in practice, because at typical page widths sixteen columns are each too narrow to hold text and every element ends up spanning three or four. If you never use a single column on its own, the count is too high.

Print traditionally uses fewer. A six- or eight-column grid on an A4 page gives columns wide enough to set text in singly, which means the grid is doing its job at every level rather than only in groups.

The gutter is the least discussed and the most consequential. It is the space between columns, and its whole function is to stop two adjacent blocks of text reading as one continuous line. Too small and the eye jumps the gap; too large and the page fragments.

The classical guidance is that a gutter should be at least the width of one lowercase character at the text size, and comfortably more if the text is set large. At the defaults here a gutter is 1.2% of the page width against a column of 5.9% — a ratio of 4.92 to 1, which is a reasonable middle.

There is a mechanical limit worth stating because it will otherwise look like a bug. The gutter is capped at the live width divided by twice the column count, so that no combination of settings can drive the column width to zero. At twelve columns with an 8% margin, that cap is 3.5% — which means the top half-percent of the 4% slider has no visible effect.

At lower counts the cap is above the slider maximum and never bites: at six columns it is 7%, at four columns 10.5%. It only shows up at twelve and sixteen, which is exactly where a runaway gutter would do damage.

Drawing both edges of every column, rather than one line per boundary, is a deliberate choice and it changes what the grid tells you. A single-line grid shows column boundaries; a double-line grid shows columns and gutters as distinct things. Since the gutter is the setting you are usually judging, that is the more informative drawing.

The historical arc runs from the manuscript page through Gutenberg to the Swiss school. Josef Müller-Brockmann's Grid Systems in Graphic Design, 1981, is the book that codified the modern practice, and its central claim — that a grid is a way of making design decisions objective rather than arbitrary — is still the best argument for using one.

Karl Gerstner's Designing Programmes, 1964, pushed further, treating the grid as a generative system rather than a scaffold, and his work for Capital magazine remains the most-cited demonstration of what a rigorously applied grid can do across an entire publication.

Screen layout inherited all of it and added one thing: the grid now has to survive being resized. The column grid overlay page traces that inheritance, and the typography grid overlays cover the rest of the family. That is why web grids are specified proportionally — a 12-column grid at 8% margins works at any width, where a 12-column grid at 24 mm margins works at one.

Which is why every setting here is a percentage. The grid keeps its proportions at any canvas size, so a layout designed at one size transfers to another without recalculation.

The most useful thing you can do with an overlay like this is check an existing layout rather than start a new one. Lay it over a page you have designed and look for elements that sit half a gutter off. That drift is invisible when you are looking at one element and glaring when the grid is on.

The second most useful thing is deciding a count by testing it. Set the grid to eight, look at the page, set it to twelve, look again. The right answer is usually obvious in comparison and impossible to reason about in the abstract.

A caution: a column grid organises the horizontal only. It says nothing about vertical rhythm, which is what the baseline grid generator does, or about the two together, which is what the modular grid generator does. Choosing a column grid means deciding that the vertical can be handled by eye — which for a lot of work is correct, and for dense editorial work is not.

For a page with a lot of images, the column grid also determines the image sizes, because an image that does not span a whole number of columns will read as misaligned against the text. That constraint is a feature: it removes the decision about how big an image should be and replaces it with a decision about how many columns it should span.

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 lines up, whether the gutter is doing its job — none of those can be answered on a blank sheet.

The export sizes itself from the paper format and the DPI you choose rather than from your screen, so a grid exported at A4 and 600 DPI prints with genuinely fine lines. SVG keeps every line editable, which is what you want when the grid 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.