Layout Grid Calculator

About the Layout Grid Calculator

A column grid only works when its numbers add up: the container width must equal the margins plus the columns plus the gutters between them. Enter four of those values and this calculator finds the fifth — the column width, the gutter, how many columns fit, the margins or the container width — and shows the grid at once, with the width of every span and where each column starts.

Add a baseline grid, put a screenshot of your page underneath to check the build, and take the result where you need it: CSS grid code (fluid or fixed), a pure-CSS overlay for checking a page in the browser, CSS variables and JSON tokens, the settings for Figma, Sketch and InDesign, or a transparent PNG or SVG overlay. When the numbers give fractional pixels, the calculator suggests nearby grids that come out in whole pixels.

Common uses

• Setting up the column grid of a new website or app design before drawing anything.
• Matching a Figma layout guide to the CSS grid a developer builds, number for number.
• Checking a live page against the design with the CSS overlay or a screenshot under the grid.
• Working out how wide a 4-of-12 card or a 6-column image really is, gutters included.

The formula

For a container of width W with n columns of width c, gutters g between them and a margin m on each side:

• W = 2m + n·c + (n − 1)·g
• column width c = (W − 2m − (n − 1)·g) ÷ n
• gutter g = (W − 2m − n·c) ÷ (n − 1)
• a span of k columns is k·c + (k − 1)·g wide, because it takes in the gutters inside it.

The column count is the largest whole n for which the columns still fit; what is left over can go to the margins to keep the grid centred. Josef Müller-Brockmann’s Grid Systems in Graphic Design remains the classic book on designing with such grids.

Fluid or fixed CSS

The fluid code uses grid-template-columns: repeat(12, minmax(0, 1fr)) inside a container with a max-width and padding for the margins, so the columns share the space and shrink on smaller screens while the gutters stay fixed. minmax(0, 1fr) rather than plain 1fr matters: a bare 1fr track cannot shrink below its content (CSS Grid: a lone 1fr means minmax(auto, 1fr)), so one long word or wide image would widen its column. The fixed code writes the pixel widths of the columns — useful inside a media query when each breakpoint has its own grid.

The CSS overlay draws the columns (and the baseline) over your real page with two repeating gradients on a ::after element — no JavaScript — so you can compare the build with the design in the browser.

Where the presets come from

• Bootstrap 5.3: containers are 540, 720, 960, 1140 and 1320 px wide at its breakpoints, and gutters are 1.5rem (24 px) — half of it as padding on each side of a column, while the row’s negative margins cancel the container’s 0.75rem padding. Column content therefore starts 12 px from the container edge, which is the margin used here (containers).
• Material Design 2: its responsive layout grid uses 4 columns with 16dp margins and gutters on a 360dp phone, and 8 columns with 32dp margins and 24dp gutters at 600dp.
• Material 3 no longer prescribes column counts; it lays out panes, with 16dp margins in compact windows and 24dp margins and spacers from medium up. The Material 3 presets therefore use panes as columns and the spacer as the gutter.
• The desktop, laptop, tablet and phone presets are common starting points, not standards.

Baseline grids

A baseline grid is a set of horizontal lines a fixed distance apart, often 4 or 8 px. Text sits on it when line heights are multiples of that distance — the calculator lists the ones between 12 and 96 px — and spacing between blocks is a multiple too. In Figma, a Uniform grid layout guide with Size 8 gives an 8-point grid; in InDesign the setting is Increment Every under Preferences › Grids (baselineDivision in scripting).

Limitations

• All columns have the same width and both margins are equal; asymmetric and modular grids with columns of different widths are not covered.
• Values are in pixels (dp and pt work the same way as numbers); percentages and rem are not converted here.
• PNG overlays are limited to 16,384 px on a side and 40 million pixels; the SVG overlay has no size limit.
• Figma, Sketch and InDesign settings are typed by hand; the calculator cannot change files in those apps.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.