How to use the Layout Grid Generator
- Pick Web · px or Print · mm/in. Web mode works in pixels with a frame width, a max content width and side margins. Print mode works in millimeters or inches with a real page size and separate top, bottom, inside and outside margins.
- Start from a Preset. The 12-column 1440 desktop grid, the 8-column tablet and 4-column mobile grids, an A4 magazine, a Letter newsletter and an A5 book page are all set up with numbers that divide cleanly. Change any field and the preset switches to Custom.
- Adjust Columns and Gutter until the stats look right. The four tiles show the column width, gutter, content width or text area, and either the outer margin (web) or how many baselines fit (print). Below them, the span list tells you how wide a block is when it covers 1, 2, 3… columns.
- Use the suggestion in the note under the stats. If web columns land on fractions of a pixel, the note offers a max width or gutter that gives whole pixels. In print, it offers to snap the bottom margin so the text area holds a whole number of lines.
- Export. Download PNG gives a transparent overlay at the exact frame or page size (1× or 2× for screens, 150 or 300 DPI for print). Download SVG is the same overlay as vectors. Copy CSS writes a ready CSS grid, and Copy specs gives you the numbers to type into Figma or InDesign.
Why a column grid saves you decisions
A grid is a set of agreements you make once so you don’t have to make them on every page: where text can start, how wide a picture can be, how far apart two things sit. Once the columns exist, “how wide should this image be?” becomes “three columns or four?”, and the answer is always a number that lines up with everything else.
Twelve columns became the web default for a practical reason: 12 divides evenly by 2, 3, 4 and 6. On the 1440 preset — 1200 px of content, 24 px gutters — each column is 78 px. Half the page is 6 columns, or 588 px. A third is 4 columns, or 384 px. A quarter is 3 columns, or 282 px. Halves, thirds and quarters all snap to the same lines, which is why card layouts, galleries and pricing tables fall into place so easily.
The math behind every number in the tool is one line:
column = (content width − (columns − 1) × gutter) ÷ columns
and a block spanning k columns is k × column + (k − 1) × gutter. That’s all a grid generator does — but doing it by hand for every breakpoint is how fractional widths like 84.67 px sneak into a design and give you blurry 1-pixel borders.
Print adds a second dimension: the baseline grid, a set of horizontal lines every leading (line spacing) apart. If body text is set 9/12 — 9 pt type on 12 pt leading — the baselines are 12 pt apart, and one point is exactly 1/72 inch, or 0.3528 mm. Aligning every column of text to the same baselines is what makes a magazine spread look calm: lines across adjacent columns sit at the same height instead of drifting.
Common grids, worked out
| Setup | Content or text area | Columns × gutter | Column width |
|---|---|---|---|
| Desktop, 1440 px frame | 1200 px max | 12 × 24 px | 78 px |
| Bootstrap 5 container (1320 px) | 1296 px | 12 × 24 px | 86 px |
| Tablet, 768 px frame, 32 px margins | 704 px | 8 × 24 px | 67 px |
| Mobile, 360 px frame, 16 px margins | 328 px | 4 × 16 px | 70 px |
| A4 magazine, 20/15 mm inside/outside | 175 mm | 6 × 5 mm | 25 mm |
| US Letter newsletter, 0.75 in margins | 7 in | 2 × 0.25 in | 3.375 in |
Change one value and the whole row moves. Widen the desktop content to 1280 px with the same 24 px gutters and columns become 84.67 px — not wrong, but every column edge now falls between pixels. Switching to 1296 px gives a clean 86, which is exactly what Bootstrap’s largest container uses.
Fitting whole lines into a print page
On the A4 preset the text area is 297 − 15 − 20 = 262 mm tall. At 12 pt leading (4.233 mm) that’s 61.89 lines — so the last line either overhangs the margin or leaves an awkward sliver of space. Setting the bottom margin to 23.77 mm gives exactly 61 lines with the last baseline sitting on the margin, and the snap button in the note does that arithmetic for you.
The Letter newsletter preset has the same issue: a 9.5 in text area at 14 pt leading holds 48.86 lines. A bottom margin of 0.917 in (23.28 mm) brings it to exactly 48.
In InDesign, set the baseline grid under Preferences › Grids to Relative To: Top Margin, Start: 0, Increment Every: your leading, then switch on Align to Baseline Grid in your body paragraph style. The Copy specs button includes those settings.
Tips from practice
Make the outer margin at least as wide as a gutter. If the margin is narrower than the space between columns, the page looks like it was cropped. On screens, 16–24 px margins on phones and a centered max width on desktops keep text off the bezel.
Judge inside margins on the spread, not the page. In a spread the two inside margins sit side by side, so classic book layouts make the inside narrower than the outside — the A5 book preset uses 15 mm inside and 20 mm outside, which reads as 30 mm of white down the middle. Tick Facing pages to check it. Thick perfect-bound books are the exception: the spine swallows a few millimeters, so widen the inside margin there.
Keep line heights on the baseline. With a 12 pt baseline, headings work at 24 pt or 36 pt leading — two or three grid lines — and captions at 12 pt. A 15 pt line height breaks the rhythm on the first paragraph that follows it.
Overlay the PNG on your mockup, not your brain. Drop the transparent overlay on top of a screenshot or an exported page in Photoshop, Procreate or Affinity and set the layer to 50% opacity. Misaligned edges are obvious within seconds. For a print-ready page size to build on, the Business Card & Poster Size Reference lists trim and bleed dimensions, and the Type Scale Generator gives heading sizes that sit well on a baseline.
Break the grid on purpose, once per spread. A pull quote that hangs into the margin or an image that bleeds off the page reads as intentional only when everything else obeys the columns.