ffee
All tools
Container Width Calculator
Work out the content width and the column width from a max-width, a percentage, gutters, columns and a gap.
Work out the content width
At 1280px: container — ·
content — · column —
How to use the Container Width Calculator
- Set the max-width, the container share of the viewport and the total page gutter.
- Choose the column count and the gap between the columns.
- Read the column width for every breakpoint, then pick a viewport for the summary line.
Features
- Column width worked out for six common breakpoints
- Adjustable max-width, container share and page gutter
- Column count from one to six with an adjustable gap
- Summary line for the viewport you choose
Advertisement
Frequently Asked Questions
Common questions about the free online container width calculator.
Take the smaller of the max-width and the viewport share, then subtract the total page gutter
to get the usable content width.
Remove the gaps from the content width, then divide what remains by the number of columns in
the grid.
It is the combined left and right padding of the container. A twelve hundred pixel box with a
thirty two pixel gutter leaves eleven sixty eight.
The viewport is too narrow for that many columns once the gutter and gaps are removed, so the
calculation clamps the result at zero.
Percentages scale with the viewport, while pixels keep a fixed measure. Many layouts mix
both, with a percentage width and a pixel max-width.
Around sixty to seventy five characters per line reads best, which is roughly six hundred to
seven hundred and fifty pixels on desktop screens.
No. It only reports the measurements, so you can copy the numbers into whatever grid or
container rules you already use.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and
no upload.
Last updated: October 10, 2026