The tool
.png)
Inputs:
- Container width (number, px)
- Column count (number)
- Gutter width (number, px)
- Margin (number, px)
Output: The calculated column width, total content width, a visual preview of the grid, and copyable CSS variables or a CSS grid snippet.
Behavior: Calculates live in-browser, no login. Exportable.
Eyeballed columns never quite line up
When column widths are guessed, elements land a few pixels off the grid, and the layout has that subtle wrongness where nothing aligns to anything. Engineers then reverse-engineer the spacing from the mockup and get a slightly different answer, and the drift compounds.
Solving column width precisely from container, gutter, and margin removes the guesswork and gives you specs engineering can implement exactly. This tool does the math and previews the result. The design thinking behind choosing a grid is in design with grids and types of grids.
How it works
1. Set the container. Enter the max width your layout uses.
2. Enter columns, gutter, and margin. The calculator solves for column width.
3. Preview the grid. See how the columns sit in the container.
4. Copy the specs. Export as CSS variables or a grid snippet.
A worked example
A 1200px container with 12 columns, 24px gutters, and 32px margins resolves to a specific column width, not a rounded guess, and the tool shows the total content width and the exact CSS. Now a designer placing a card across four columns and an engineer building it are working from the same numbers, so the layout matches the design instead of approximating it. That precision is what lets web layouts hold together as they scale.
From grid to layout, with Figr
A grid is a foundation; designing on it consistently is the work. Figr is an AI product designer that designs on your layout system from your product context, so screens sit on a consistent grid rather than a per-screen approximation. Pair this with the breakpoint calculator for responsive behavior and the spacing system generator for the rhythm within it.
Who this is for
This is for UX designers and front-end developers who want a grid that is exact, not approximate.
What this tool is not
It computes the grid; it does not decide how content should be arranged on it, which is the design work. It is also a free, standalone utility, not a Figr product feature.
FAQ
Is the grid calculator free?
Yes, free and no sign-up.
What does it calculate?
Column width and content width from your container, column count, gutter, and margin, with copyable CSS.
Does it output CSS?
Yes, CSS variables or a CSS grid snippet.
Can I preview the grid?
Yes, the tool shows a live visual of the columns.
How is this different from Figr the product?
This is a free utility. Figr the product is an AI product designer that turns product context into UX decisions and Figma-ready design.