Griddy Up Grid calculator
§ 01 / Intro

A specimen sheet for anyone who draws with columns.

Set a max width, pick your columns, gutter, and margin. Griddy Up returns the column width, the totals, and a live preview of the grid you are about to build.

§ 02 / Presets Start here

Grid presets

Calculator

§ 03 / Inputs
px

Total width of the container.

cols

How many columns across the grid.

px

Space between each pair of columns.

px

Outer space on each side, inside the max width.

§ 04 / Column width
Specimen · 01 Column width, computed
74 px
Content width
1152 px
Gutter total
264 px
Ratio
1 / 12
§ 05 / Preview

Grid preview

Blueprint 1200 px · 12 cols
§ 06 / CSS

CSS output