Modular Grid Calculator
Layout grid math: container width, margins, columns and gutter → column width, the width of every span, row modules on a baseline, and the CSS grid.
The column and content width, a span table (k columns + k−1 gutters, in px and %), optional row modules, a live preview and CSS as fixed columns or fr units.
Example: 1200 px, 32 px margins, 12 columns, 24 px gutters: 72.67 px columns, a 6-column span is 556 px (48.9 %); an 8 px baseline with 6-row modules gives grid-auto-rows: 48px.
Columns are what is left
after margins and gutters.
The arithmetic of a layout grid, why spans are not multiples of the column, and what the CSS does with it.
The arithmetic
A grid has a container width, a margin on each side, N columns and N − 1 gutters between them, so the column width is (container − 2·margin − (N − 1)·gutter) ÷ N. An element spanning k columns is k columns plus the k − 1 gutters it crosses — which is why a 6-of-12 span is not half the content width but half plus half a gutter short of it. Solving the other way, a wanted column width gives the container that fits.
Rows and modules
A modular grid adds rows: a baseline unit (often the body line height) and modules of some number of baselines. The page writes them as grid-auto-rows with the baseline as the row gap, so blocks land on the vertical rhythm. Whether your type actually sits on the baseline depends on the fonts and line heights — that is the type scale's job.
The CSS and the preview
Two forms: fixed pixel columns (exactly the numbers, and they drift by a pixel when the column is not whole) and repeat(N, minmax(0, 1fr)) with the same gap, which the browser resolves at any width. The preview draws the columns proportionally; breakpoints, type sizes and content are yours. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- column = (container − 2·margin − (N−1)·gutter) ÷ N; span k = k·column + (k−1)·gutter; CSS Grid Layout Module Level 2 for the generated declarations
Last reviewed 21 September 2026. How results are checked: How we verify.