Layout Grid Generator

What this generator does

Computes a grid and then uses it. Most grid calculators stop at the column width; this checks its own answer by re-adding the margins, columns and gutters and comparing with the page width, and it refuses to report a grid that does not reconcile. It then generates layouts on that grid by repeated full cuts, which is why the blocks provably tile the page — a placement-and-retry approach needs an overlap test and still leaves gaps.

How to use this tool

1. Set the page width, the number of columns, the gutter and the margin.
2. Check the column widths — the sum is shown so you can verify it.
3. Set the rows and the number of blocks, then generate a layout.
4. Copy the measurements, or the SVG of the layout.

Understanding the controls

Page width

Pixels, points or millimetres — the arithmetic does not care which, as long as you are consistent. The output is whole units, so pick the unit you want whole numbers in.

Columns

One to twenty-four. Widths come out whole and differ by at most one unit; where the page does not divide exactly, the page says how many columns are one unit wider and why spreading the remainder is what keeps the right margin in place.

Gutter

The gap between columns. There is always one fewer gutter than there are columns, which is the off-by-one that most hand calculations get wrong.

Margin

Applied to both sides. The last column ends exactly at the right margin — that is asserted, not assumed.

Rows and blocks

The horizontal bands the layout can cut on, and how many areas to cut the page into. Twelve blocks is the maximum; beyond that a page reads as noise.

Seed

Reproduces the same layout, which is useful when comparing two grids with the same block arrangement.

Worked examples

1200 wide, 12 columns, 24 gutter, 48 margin

Twelve columns of exactly 70 — 96 + 840 + 264 = 1200.

1000 wide, same settings

Columns of 54 and 53. The page says how many are the wider one.

12 columns, 8 rows, 6 blocks

Six areas that cover the page once, every edge on a grid line.

200 wide, 12 columns

Refused, with an explanation — there is no room for twelve columns at those margins.

Common use cases

• Setting up a column grid in a design tool without doing the arithmetic by hand
• Checking whether a grid you were given actually adds up
• Generating layout options for a poster, spread or landing page
• Teaching grid systems with numbers somebody can verify
• Breaking out of the same three-block layout you always draw

How this generator works

The content width is the page minus both margins, less the total gutter width. That figure is divided among the columns by flooring each share and handing the remainder out one unit at a time, so the columns differ by at most one and sum exactly. Layouts are then produced by guillotine subdivision: pick a region, cut it along a grid line all the way across, and recurse into both halves. Because every cut is a full cut, the resulting blocks partition the page by construction — and the finished layout is checked cell by cell, where a cell covered twice is an overlap and a cell covered zero times is a gap.

Randomness and fairness

Randomness decides only where the page is cut and which role each block is labelled with. The column arithmetic contains no randomness at all — the same settings always produce the same widths, which is the point of a calculator. A seed makes the cuts reproducible through a documented non-cryptographic generator.

For how randomness is produced across the whole site, see how Generate Random works.

Assumptions this tool makes

• Every measurement is in the same unit, and the margins are equal on both sides.

Limitations and good to know

• It is a grid and a subdivision, not a design. The block roles are suggestions in reading order and carry no claim that the layout is good.
• There is no typography here — no type scale, line height or baseline rhythm beyond the row height you set.
• Guillotine subdivision cannot produce layouts that are not made of full cuts, so an L-shaped block is out of reach.
• Responsive breakpoints are not modelled; the grid is one page width at a time.
• Neither the grid nor the layout persists; copy the measurements into your design file rather than relying on this page.

Common mistakes

Counting one gutter per column

Twelve columns have eleven gutters. This is the single most common arithmetic error in a hand-built grid, and it is why the sum is shown on screen.

Rounding the column width yourself

Rounding each column independently overshoots or undershoots the page. Spreading the remainder is the only way the grid meets both margins.

Asking for more blocks than the grid can hold

A 2×1 grid cannot be cut into eight blocks. The page says how many it managed rather than silently returning fewer.

Practical tips

• Pick a page width that divides well — 1200 with 12 columns and 24 gutters gives whole 70s, which is why it is such a common choice.
• Generate several layouts on the same grid and pick between them; the grid is the decision, the layout is a suggestion.
• Copy the column starts into your design tool's guides rather than dragging them.

Privacy and your data

Everything is computed in your browser from numbers. There is nothing to upload and no text to leak, and none of your settings are stored or written into the page address. Analytics records that the tool ran and how many blocks the layout had.

Frequently asked questions

Why are some of my columns one unit wider?

Because the page does not divide exactly. Every alternative is worse: rounding each column the same way pushes the grid past the margin, and dropping the remainder pulls it short. Spreading the odd units is what makes the grid land on both margins.

How do I know the blocks do not overlap?

The layout is checked cell by cell against the grid. A cell covered twice is an overlap and a cell covered zero times is a gap, so one count finds both — and the construction makes both impossible in the first place, because every cut runs the full width or height of the area it divides.

Can I use it for a web grid?

Yes — work in pixels at your target width. The column widths and starts translate directly into CSS grid track sizes or flexbox bases.

Does it know about baseline grids?

Only through the row height, which sets the horizontal bands the layout can cut on. It does not generate a type scale or check that your line height divides into it.