What formula does this use?

Column width = (container width − left margin − right margin − (gutters × (columns − 1))) ÷ columns. Gutters are gaps between columns only; margins are the outer padding on each side.

What is the difference between gutters and margins?

Gutters are the gaps between columns. Margins (also called outer margins or bleeds) are the spaces outside the first and last column. This tool lets you set them independently.

Can I use this for responsive breakpoints?

Yes. Just change the container width to match your breakpoint (e.g. 768px for tablet) and recalculate.

How do I get a fluid/percentage grid?

Enable the "Percentage output" toggle and the tool will show column widths as percentages of the container instead of fixed pixel values.

What is a 12-column grid?

A 12-column grid is the most common layout system because 12 divides evenly by 2, 3, 4, and 6 — giving flexible content widths (1/2, 1/3, 1/4, 1/6 of the container).

Grid Column Calculator

Name: Grid Column Calculator
Availability: InStock
Author: Nham Vu

Enter your container width, column count, gutter size, and margin to get exact CSS grid column widths and a visual preview.

Grid Settings

Container Width (px)

Number of Columns

Gutter Size (px)

Left Margin (px)

Right Margin (px)

Show percentage output

—

Column Width

—

Total Gutter

—

Content Width

—

Column %

Grid Preview

(scaled to fit)

Common Span Widths

Span	Width (px)	Width (%)	Fraction

Generated CSS

Copied!

Summary

Enter your container width, column count, gutter size, and margin to get exact CSS grid column widths and a visual preview.

How it works

Enter your container width in pixels.
Set the number of columns you need.
Define the gutter size (space between columns).
Set the left and right margin (outer padding) if any.
The calculator instantly shows the column width and generates copy-ready CSS.

Use cases

Calculate exact column widths before writing CSS grid layout code.
Convert a design comp (e.g. 12-column 1440px) into pixel values for development.
Verify gutter and margin math before committing a layout to a design system.
Compare different column counts to find the best fit for a content area.
Generate a CSS snippet to paste directly into a stylesheet.
Prototype breakpoint grids quickly without manual arithmetic.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu