The formula
column = (container − 2·margin − (n − 1)·gutter) ÷ n
Where it comes from
The sum that always goes wrong is the gutter: between twelve columns there are eleven gutters, not twelve. That extra one steals a whole gutter from the content and the columns no longer add up to the container, which is the usual reason a grid is "off by a few pixels". A block spanning several columns also takes the gutters between them, which is why half a grid is not six times half a column.
How to work it out by hand
- Subtract the margin on both sides to get the usable width
- Subtract the gutters: one fewer than the columns
- Divide what is left by the number of columns
- A block of k columns is k widths plus k − 1 gutters
What is worth knowing
With twelve columns and a 24 px gutter, the gutters take 264 px of a 1,200 px container: 22 % of the width is air, before counting any margin. That is worth knowing when choosing the gutter, because on small screens that share shoots up and the grid becomes useless; that is why frameworks reduce it below a certain width. The breakpoints listed are those of a specific version of each framework — they change between major versions — and they are conventions, not device sizes: a current phone in landscape already clears the first.