Grid Column & Gutter Calculator
Column width from container, columns and gutter, solved in any direction, with the span table and the reminder that twelve columns have eleven gutters.
Solving for Column width
Container 1200px
Outer margin, each side 0px
Content width 1200px
Columns 12
Gutter 24px
Column width 78px
Column as a percentage 6.5%
Check 12 × 78 + 11 × 24 = 1200px
Span widths, gutters included
1 of 12 78px (6.5%)
2 of 12 180px (15%)
3 of 12 282px (23.5%)
4 of 12 384px (32%)
5 of 12 486px (40.5%)
6 of 12 588px (49%)
7 of 12 690px (57.5%)
8 of 12 792px (66%)
9 of 12 894px (74.5%)
10 of 12 996px (83%)
11 of 12 1098px (91.5%)
12 of 12 1200px (100%)
CSS
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;
12 columns and 11 gutters, not 12. The identity is content = columns ×
column + (columns − 1) × gutter, and the check line above adds up to the
1200px of content width. A grid built with a gutter after every column
is one gutter too wide, which is where a few pixels of unexplained
overflow on the right usually come from.
A span of four columns is 384px rather than four times 78px, because the
three gutters inside the span belong to it. That is the number to use
when an image has to line up with a text block.
Write the grid with `gap` and `1fr` rather than percentage widths and
margins. `1fr` divides what is left after the gaps, so the browser does
this arithmetic at every viewport and the sub-pixel remainder lands
inside the track rather than as a hairline between two floats.
The percentage figures are against the content width, not the container.
If you are hand-writing percentage widths, they have to be against the
same box: 6.5% of the content is not the same as of the 1200px container
once there is a 0px margin.
Column counts are a design convention, not a constraint. Twelve divides
by 2, 3, 4 and 6, which is why it won; a twelve-column grid is only
useful because of what it divides into.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
One identity holds a grid together:
content = columns × column + (columns − 1) × gutterNote the minus one. Gutters go between columns, not after every column, so twelve columns have eleven gutters. A grid built with twelve is one gutter too wide, and that is where the few pixels of unexplained overflow on the right of a layout usually come from.
This solves the identity in any direction, and it gives you the span table, which is the other thing you actually need: four columns wide is not four times a column, because the three gutters inside the span belong to it.
How to use
- Pick what you are solving for.
- Fill in the rest: container, outer margin, columns, gutter.
- Read the column width, the check line and the span table.
- Copy the CSS.
Example
A 1200px container, twelve columns, a 24px gutter:
Solving for Column width
Container 1200px
Outer margin, each side 0px
Content width 1200px
Columns 12
Gutter 24px
Column width 78px
Column as a percentage 6.5%
Check 12 × 78 + 11 × 24 = 1200px
Span widths, gutters included
1 of 12 78px (6.5%)
2 of 12 180px (15%)
3 of 12 282px (23.5%)
4 of 12 384px (32%)
5 of 12 486px (40.5%)
6 of 12 588px (49%)
7 of 12 690px (57.5%)
8 of 12 792px (66%)
9 of 12 894px (74.5%)
10 of 12 996px (83%)
11 of 12 1098px (91.5%)
12 of 12 1200px (100%)
CSS
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;Four columns is 384px, not 312px. If you sized an image at four times the column width it is 72px too narrow, and it will not line up with the text block beside it.
Pitfalls
n columns, n−1 gutters. The single most common grid mistake. The check line in the output exists so you can see the arithmetic close.
A span includes its inner gutters. Span two is two columns plus one gutter, span three is three plus two. The table saves you from working it out per element.
Outer margins are not gutters. The margin is outside the first and last column; the gutter is between columns. Some design systems set them equal, which makes them easy to confuse and does not make them the same thing.
Write the CSS with gap and 1fr, not percentages. 1fr divides what is left
after the gaps, so the browser does this arithmetic at every viewport width and the
sub-pixel remainder stays inside the track. Percentage widths plus margins put the
remainder between the items, which is what hairline gaps at odd zoom levels are.
Percentages are of the content width, not the container. Once there is an outer margin those are two different boxes, and a percentage against the wrong one is off by twice the margin.
A twelve-column grid is only useful because of what it divides into. 2, 3, 4 and 6. If your design never uses thirds, eight or ten columns will give you cleaner numbers.
Column widths with long decimals are a smell. A 1000px container with 12 columns
and a 24px gutter gives 61.333px a column. Either accept 1fr and stop caring about
the decimal, or pick a container width that divides: 1200 with a 24px gutter comes out
at a flat 78.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored. The share link carries the figures.
CSS Grid and gap are in every browser in use. The generated snippet is the modern
version of the grid on purpose: repeat(12, 1fr) with a pixel gap reproduces the
design grid exactly while leaving the division to the layout engine.
If you need the pixel column width for a design file, an email template or a fixed
canvas, that is what the column and span figures are for. Those are the contexts
where 1fr is not available and the arithmetic has to be done by hand.
The solve-for-count direction floors a partial column: two thirds of a column is not a column, and a grid that pretends otherwise overflows.
Frequently asked questions
What container width should I design at?
Should the gutter be fixed or fluid?
How do I do this responsively?
repeat(auto-fit, minmax(…, 1fr)), which picks the count from the available width.Why does my 12-column layout overflow by 24 pixels?
margin-right on every item
instead of on all but the last. It is 24px because that is one gutter.Is a grid gap the same as a gutter?
gap puts space between tracks and not outside them, which is
exactly what a gutter is. That is why gap is the right property and percentage
margins are not.