CSS Grid Gutter Calculator
Work out the exact column width for a grid once gutters are subtracted — for CSS Grid, Flexbox rows and design-system layouts.
How it works
column width = (container − (columns − 1) × gutter) ÷ columns
A fixed grid divides its container width among N columns and the N−1 gutters between them, so the gutters must be subtracted before the remaining space is split evenly. There are always one fewer gutters than columns, since the outer edges have no gap. In CSS Grid this is handled automatically by grid-template-columns: repeat(N, 1fr) with a gap, but knowing the resolved pixel width matters for spec handoff, image sizing (see srcset) and checking whether content fits.
Worked example
A 1200px container, 12 columns, 24px gutter: gutters = 11 × 24 = 264px. Remaining 1200 − 264 = 936px ÷ 12 = 78px per column, which is 6.5% of the container width.
Frequently asked questions
Do I still need this with CSS Grid’s 1fr?
Grid does the division for you at render time, but you often need the resolved pixel width up front — to size responsive images, hand specs to developers, or confirm a component fits in a given number of columns.
Why 11 gutters for 12 columns?
Gutters only sit *between* columns, and there is no gap outside the first or last one. N columns always have N − 1 internal gutters, which is why the total gutter space is (columns − 1) × gutter.
What gutter size should I use?
Common design systems use 16–32px. Larger gutters give an airier layout but shrink each column; on narrow screens teams often reduce the gutter (or column count) so content columns stay usable.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.