Grid Layout Columns Calculator

Work out grid layout columns instantly with clear inputs, formula shown and shareable results.

About Grid Layout Columns Calculator

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.

Formula

Column width

column = (container - 2 x margin - gutter x (columns - 1)) / columns

Worked example

With the default values below, Grid Layout Columns Calculator returns Width of one column of 74.000. Change any input above and every figure here is recalculated in your browser.

Inputs used

Container widthminimum 1 px: 1,200 px
Number of columnsminimum 1: 12
Gutter widthminimum 0 px: 24 px
Outer margin each sideminimum 0 px: 24 px

Results

Width of one column: 74.000 px
Total gutter space: 264.0 px
Content width inside the margins: 1,152.0 px
One column as a percentage: 6.4236%

Step by step

1Values used
2Column width
3Width of one column= 74.000 px
4Total gutter space= 264.0 px
5Content width inside the margins= 1,152.0 px
6One column as a percentage= 6.4236

Assumptions and limits

The result is derived only from the 4 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 4 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the Grid Layout Columns figure worked out?

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.

Why does this matter?

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.

What do I need to enter?

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.