Work out grid layout columns instantly with clear inputs, formula shown and shareable results.
Gutters sit between columns only, so there are columns minus one of them, and the column width is the remaining content width divided by the column count. The columns-minus-one detail is what makes a twelve column grid at 24 px gutters come out to 78 px columns rather than 76, and the mismatch compounds across the row.
Column width
column = (container - 2 x margin - gutter x (columns - 1)) / columns
column = (container - 2 x margin - gutter x (columns - 1)) / columns. Gutters sit between columns only, so there are columns minus one of them, and the column width is the remaining content width divided by the column count.
The columns-minus-one detail is what makes a twelve column grid at 24 px gutters come out to 78 px columns rather than 76, and the mismatch compounds across the row.
Enter container width, number of columns, gutter width, outer margin each side. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.