Grid Columns: Exact Widths for Your Layout
Guessing column widths leads to overflow and awkward gaps. This calculator subtracts the gutters first, then divides what is left.
What is the Grid Columns Calculator?
Enter a container width, a column count, and a gutter size, and the tool calculates each column width and the total gutter space. It assumes equal columns with a gutter between each pair, which covers most page grids.
How to use it
- Enter the container width in pixels.
- Enter the number of columns and the gutter size.
- Click Calculate Grid.
Worked example
A 1200 px container with 12 columns and 24 px gutters gives 78 px columns, since gutters take 264 px in total.
How wide is each column in a 1200 px, 12-column grid with 24 px gutters?
Eleven gutters take 264 px, leaving 936 px, so each of the 12 columns is 78 px wide.
Frequently asked questions
Do gutters sit on the outer edges too?
This calculator puts gutters only between columns, which is the most common grid setup.
What if the column width is not whole?
Round down slightly and let the leftover sit as margin, or adjust the container width.