Free Layout Grid Generator

The column grid is the oldest of these and the simplest to state: divide the usable width into equal columns separated by gutters, and let every element span a whole number of them. What the statement leaves out is that the number of columns is a compromise between how many distinct widths you want and how narrow you are willing to let a single column get. Twelve is popular because it divides by two, three, four and six, which covers most of the layouts anyone actually draws. It is not a law, and on a narrow page it produces columns too thin to hold a word.

The modular grid crosses that column structure with rows, producing a field of modules. Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) is the book that fixed the method in the profession, and its argument is not really about geometry: a grid is a way of making a series of pages feel like one publication, by removing the need to re-decide the same things on every spread. The cost is that a module is a commitment. A photograph that wants to be slightly wider than three modules is a photograph you will crop.

The baseline grid is the one most often skipped and most often missed. Every line of type in a column sits on a baseline, and if two adjacent columns use different leading, their lines drift apart down the page. A baseline grid fixes a single vertical rhythm that all the type snaps to. The strong-line interval matters here: with a 4px baseline you do not align sections to every fourth pixel, you align them to every fourth or eighth line, and the overlay draws those emphatically so the two scales stay distinguishable.

The 8pt spacing grid belongs to none of those traditions and has become the most widely used of all of them. It is not a grid of cells but a rule about distance: every gap, padding and offset is a multiple of eight. Its appeal is arithmetic rather than aesthetic — eight divides cleanly at the density ratios interfaces are rendered at, so a value survives being scaled without landing on a half pixel. Where a modular grid answers where an element goes, the spacing grid answers how far it sits from the next one, which is why the two are usually running at the same time and why stacking them is worth doing before either is committed to code.

The manuscript grid — one text block with margins — predates all of them and still governs books. Its proportions were the subject of serious study long before the profession existed; Jan Tschichold reconstructed a medieval canon in which the text block's diagonal runs parallel to the page's, which produces margins in a 2:3:4:6 ratio and a text area that is a smaller version of the page shape. That is a genuinely different way of arriving at a margin from picking a round number.

The template grids are a different kind of object. A comic page, a storyboard, an icon keyline and a social safe area are not proportional systems; they are constraints imposed from outside — by a printer's trim, by a camera's aspect ratio, by a phone's interface. They belong in the same tool because the work is the same work: you are checking whether the thing you drew survives contact with the frame it will be seen in.

The safe-area grids are the clearest case of that. A vertical video is not shown at 9:16 — it is shown at 9:16 with a caption over the bottom fifth, a handle and a follow button above that, and a status bar across the top. Composing to the full frame and discovering afterwards that the subject is behind the caption is such a common failure that every platform publishes a safe-area guide, and the guides disagree with each other. Drawing the obstruction bands rather than just the safe rectangle is the difference between knowing something is covered and knowing what covers it.

The three architectural systems are here because they are the same reasoning at a different scale. A structural grid places column bays; a tartan grid alternates wide and narrow bands so that servant space — corridors, risers, ducts — is designed rather than left over; Le Corbusier's Modulor derives a proportional series from human dimensions and the golden section. An architect and an editorial designer are both dividing a plane so that the divisions carry meaning, and the Modulor's series is the same phi progression a designer meets in the golden ratio.

None of this argues for a particular grid. It argues that the choice is empirical and cheap to test, and that the only reason it usually is not tested is that the grid and the work are normally in different windows. Put them in one and the questions answer themselves: whether the gutter is too tight, whether the modules fit the images you actually have, whether the caption is going to cover the face.