Grid Column Width
Calculator
Results
- Column width (px)
- 78
- Content width (px)
- 1,200
- Total gutter width (px)
- 264
- Column plus gutter (px)
- 102
Design and print results
| Column width (px) | 78 |
| Content width (px) | 1,200 |
| Total gutter width (px) | 264 |
| Column plus gutter (px) | 102 |
formula-map diagram
- Column width (px)
- 78
- Content width (px)
- 1,200
- Total gutter width (px)
- 264
- Column plus gutter (px)
- 102
Formula breakdown
Formula
column = (container − 2 × margin − (columns − 1) × gutter) ÷ columns= 78
Note
Simplified model: these are standard prepress and typographic relationships computed on nominal values. Real press bulk, paper caliper and shrinkage, ink limits for a given profile, font metrics and binding allowances vary by supplier and by job, so confirm with your printer and a proof before going to press.
More in Design and printing
See all →Frequently asked questions
How is column width calculated in a grid system?+
Subtract the total gutter space (number of gutters times gutter width) from the overall container width, then divide the remainder by the number of columns. A 1200px container with 12 columns and 20px gutters leaves 1000px of columns, or about 83px per column.
Why does adding more columns shrink each column's width faster than expected?+
Because every additional column also adds another gutter, so both the numerator (available width after gutters) shrinks and the divisor (column count) grows — the effect compounds rather than scaling linearly.
How many columns should my grid use?+
12 columns is the most common web layout standard because it divides evenly into halves, thirds, quarters, and sixths, giving flexible options for how many columns a given element spans. Simpler layouts sometimes use 4-6.
Do margins count the same as gutters in this calculation?+
No — margins are the space outside the outermost columns (between the grid and the container edge), while gutters are the space between columns. Both need to be subtracted from total width, but they're typically tracked as separate values since they're often sized differently.
Why does an element spanning 'X columns' come out narrower than X times one column's width?+
Because a multi-column span includes only the internal gutters between its own columns, not an extra gutter at each end — so its width is (X x column width) + ((X-1) x gutter width), not simply X times a single column's width.