Layout Grid Calculator (Columns, Gutters, 8pt Grid)

Enter a total width, the number of columns, the gutter and the side margins to get the width of one column and of any run of columns. Use it for a 12-column web grid or to divide a printed page in millimetres.

How to use

1. Choose px or mm under "Unit", then pick a "Width preset" or type the "Total width".
2. Enter "Columns", "Gutter" and "Margin". For unequal margins, set "Side margins" to "Left and right".
3. Read "Column width" and the "Span widths" table, and check the badge for the grid chosen under "Grid unit". If it is off grid, try the total width in the note.
4. Turn on "Compare three breakpoints" to see three widths at once, and press "Copy CSS" to take the code.

How it works

• Column width = (total width − left margin − right margin − gutter × (columns − 1)) ÷ columns. Width of n columns = column width × n + gutter × (n − 1).
• With a "Maximum content width", a wider total keeps the content at that width and splits the rest between the margins.
• In mm mode the grid unit is in points: 1 pt = 0.3528 mm, and 1 mm = 3.78 px at 96 dpi.
• Your inputs are kept in this browser on this device.

Questions and answers

How wide is a column in a 1200 px 12-column grid?

With a 24 px gutter and no margins, (1200 − 24 × 11) ÷ 12 = 78 px. With a 32 px gutter it is 70.67 px.

What if the column width is not on the 8 px grid?

The note names the nearest multiple and the total width that gives it: a 78 px column becomes 80 px at a content width of 1224 px. A small change to the gutter or margins also works.

How many columns should an A4 page have?

There is no single answer. Two or three suit text; six or twelve make mixed photos and tables easier. Enter A4 210 mm, 15 mm margins and a 4 mm gutter to compare.

How do I use the copied CSS?

.container sets the content width and side padding; .grid sets the columns and gap. An element across several columns gets grid-column: span 4. In mm mode the snippet also has @page margins for printing.