design tool
Grid calculator for design
Column width is the canvas width minus both margins and every gutter, divided by the number of columns. Enter the four numbers and this grid calculator gives the column width, draws the grid to scale, lists where every column starts and writes the CSS.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Start from a preset or your own size
Pick a flyer canvas, a social post, a slide, a 12 column web page, A4 or US Letter, or choose Your own size.
- 2
Set columns, gutter and margin
Change any of the five boxes. The column width, the drawing and the CSS update as you type.
- 3
Check for half pixels
If the columns come out at a fraction of a pixel, the note under the boxes suggests a content width that gives whole columns.
- 4
Take the numbers away
Open Spans and guide positions for every column edge, or press Copy CSS to paste the grid into a stylesheet.
The formula, and a worked example
A column grid has three ingredients: margins on the outside, gutters between columns, and the columns themselves, all equal. The width left for columns is the canvas width minus two margins and one fewer gutter than there are columns, and that remainder is shared equally. On a 1240 pixel A4 canvas with 6 columns, 24 pixel gutters and 80 pixel margins, the content area is 1080 pixels, five gutters take 120, and each column is 160 pixels. A block spanning three columns is three columns plus the two gutters between them, 528 pixels, which the span table works out for every count.
Why 12, 6 and 4 columns are so common
Twelve divides evenly into halves, thirds, quarters and sixths, so one grid supports a wide range of layouts: a full width banner, two equal cards, three features, or a 4 and 8 split for a sidebar. Six does the same for halves and thirds on a narrower page, and four suits a square social post where you rarely want more than two blocks side by side. A grid with more columns than you will ever use only adds lines to align to. Start with the fewest columns that give you the splits your design actually needs.
Pixels, millimetres and half pixels
Screen canvases are measured in pixels and print documents in millimetres; pick the unit and the CSS follows it, since CSS accepts both. In pixels, a column of 162.67 is a problem: its edges fall between pixels and get blurred or rounded inconsistently, so a line of text that should align with an image is a pixel off. When that happens the calculator names the nearest content widths that divide evenly, and you change the margin to get there. In millimetres fractions do not matter, because the printer's resolution is far finer than any measurement you will type.
The CSS it writes
The output is a container with a maximum width equal to the canvas, padding equal to the margin, and grid-template-columns set to repeat the column count with minmax(0, 1fr). The minmax part matters: a plain 1fr column will grow to fit a long word or a wide image and push the grid out of shape, which the CSS Grid specification explains as the automatic minimum size. column-gap carries the gutter. A span class shows how a child element covers several columns, and the grid scales down with the window while keeping its proportions.
Limits worth knowing
Every column is the same width and both margins are equal, so a magazine spread with a wider outer margin, or a layout with a fixed sidebar, needs its numbers worked out by hand. Rows and baseline grids are not drawn. The grid lives in this tab only: nothing is uploaded and nothing is stored, ever.
Limits
- Equal columns only. Asymmetric grids, such as a narrow sidebar beside a wide main column, are not drawn.
- One margin value applies to both sides. Unequal inside and outside margins on a printed spread are not modelled.
- Columns can number 1 to 24. A setting that leaves no room for columns gets a plain message saying which number to reduce.
What it does not do
- It does not draw rows or a baseline grid.
- It does not place guides inside a design app; copy the positions across by hand.
- It does not store a grid between visits.
Questions people ask
What gutter width should I use?
On screen, 16 to 32 pixels covers most layouts, with 24 a safe default on a desktop canvas and 16 on a phone. In print, 4 to 6 millimetres on A4 is typical. A useful check is the line height of your body text: a gutter about that size keeps neighbouring columns of text clearly apart without leaving a visible river of white space.
How wide is each column in a 12 column grid at 1440 pixels?
It depends on the gutter and the margins. With 24 pixel gutters and 72 pixel margins, the content area is 1296 pixels, eleven gutters take 264, and each of the 12 columns is 86 pixels. With 32 pixel gutters and 80 pixel margins each column is about 77.33 pixels, which is why changing the margin slightly is often worth doing.
Should margins be wider than gutters?
Usually, yes. A margin wider than the gutter tells the eye where the content ends and the edge of the page begins, and it gives room for a printer's trim or a phone's rounded corners. Two to four times the gutter is common. Equal margins and gutters can work for dense dashboards, but they tend to make a page feel cramped at the edges.
Can I use this for a print flyer or a poster?
Yes. Switch the unit to millimetres and enter the finished width, such as 210 for A4. Keep the margin at least 3 to 5 millimetres inside the trim so nothing important is cut, and remember that a printer's bleed sits outside the canvas, not inside the margin. The column positions then translate directly into guides in any layout app.
Why do my columns not line up in the browser?
Most often a column is a fraction of a pixel wide, so each edge rounds differently, or an image inside a column is wider than the column and stretches it. The CSS here uses minmax(0, 1fr) to stop the stretching, and the calculator warns about fractional widths. Also check that box-sizing is border-box, or padding is added on top of the width.
Start a flyer on a ready-made layout
Take what you made here into flyers.
Create a flyer with OneCraftMore tools like this
- Trifold panel size calculatorTrifold panel size for A4, US Letter and more: the three panel widths for a roll fold or Z fold, the fold positions on both faces and a layout drawn to scale.
- Pixels to inches converterConvert pixels to inches and centimetres at any DPI, or work back from a print size to pixels, with the largest print size at six common densities.
- Safe zone checker for Reels, TikTok and ShortsA safe zone checker for vertical video: drop a 9:16 image or video frame and see the Reels, TikTok and Shorts interface areas shaded over it, then save a PNG.
- Aspect ratio calculatorType a size and see your shape drawn against any target: the bars if you fit it whole, the crop if you fill it. Presets for print, screen and social.
- Flyer size resizerDrop a flyer and see it refitted onto all ten builder canvases at once, each drawn at its true shape, with the ones that will print soft flagged in words.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .