liminfoCSS Grid Calculator
Free web tool: CSS Grid Calculator
CSS Output
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;Column width: ~389px
Preview
About CSS Grid Calculator
The CSS Grid Calculator computes the exact column width for a CSS Grid layout given a container width, number of columns, and gap size in pixels. You enter three values — columns (1–12), gap (px), and container width (px) — and the calculator applies the formula: column width = (container - gap × (columns - 1)) / columns. The result is displayed as both a pixel value and a ready-to-copy grid-template-columns CSS string.
This tool is particularly useful when you need to work with designs that specify exact pixel dimensions, such as a 1200px wide container divided into 4 columns with 24px gaps. Rather than doing the arithmetic manually or writing test CSS, the calculator gives you the answer instantly and lets you switch between fr units (for flexible layouts) and px units (for fixed-width layouts) with a single checkbox.
Designers and developers use CSS Grid calculators when translating Figma or Sketch design specs into code, verifying that a grid system is mathematically consistent, or planning a design system with standardized column widths. The live preview shows a two-row sample grid using the calculated column count so you can visually confirm the layout before implementing it.
Key Features
- Calculates exact column width using the formula: (container - gap × (columns-1)) / columns
- Column input accepts 1 to 12 columns for standard and custom grid systems
- Gap input in pixels to match design specifications precisely
- Container width input to match your layout max-width or breakpoint width
- Toggle between fr units (repeat(N, 1fr)) and fixed px units for different use cases
- Displays the calculated per-column pixel width alongside the CSS output
- Live grid preview with two rows of sample cells to confirm layout visually
- One-click CSS copy — the full grid-template-columns value is copied to clipboard
Frequently Asked Questions
What formula does the CSS Grid Calculator use?
The calculator uses the standard CSS Grid column width formula: column width = (container width - gap × (column count - 1)) / column count. For example, a 1200px container with 3 columns and 24px gaps yields: (1200 - 24 × 2) / 3 = (1200 - 48) / 3 = 384px per column.
When should I use fr units instead of px units?
Use fr units (e.g., repeat(3, 1fr)) when you want columns to be proportionally flexible and adapt to any container width. Use px units when your design requires exact pixel widths that must not change — for example, in print layouts, fixed-width email templates, or when matching a pixel-perfect design mockup.
What is the container width I should enter?
Enter the CSS max-width or width of the element that will hold the grid — typically your page wrapper or content container. Common values are 1200px, 1440px, or 768px (tablet breakpoint). Do not subtract padding here; the calculator assumes the container width is the usable content area.
What does the gap value represent?
The gap value represents the space in pixels between adjacent columns (column-gap in CSS). This is the same value you will pass to the gap or column-gap property in your CSS. If your design has different row and column gaps, enter only the column gap value here since this calculator focuses on column width computation.
How is this different from the CSS Grid Playground?
The CSS Grid Playground lets you visually experiment with grid layouts by dragging sliders. The CSS Grid Calculator is focused on arithmetic — you give it specific dimensions and it gives back the exact column width and CSS. Use the Calculator when translating design specs to code; use the Playground when exploring grid options visually.
Why does my column width calculation not match my browser layout?
The most common reason is that padding is included in your container width. CSS box-sizing: border-box includes padding in the element's declared width, so the usable content area is smaller. Subtract horizontal padding from the container width before entering it into the calculator to get accurate results.
Can I use the output with CSS-in-JS or styled-components?
Yes. The generated grid-template-columns value is a standard CSS string that works in any context — plain CSS files, inline styles, styled-components template literals, or Tailwind arbitrary values like grid-cols-[repeat(4,_273px)]. Just copy and paste the value where needed.
What is a typical grid system for a 1200px wide website?
A common 12-column grid on 1200px uses a 24px gap: (1200 - 24 × 11) / 12 = (1200 - 264) / 12 = 78px per column. Bootstrap's grid uses 30px gutters (15px each side). A simpler 3-column layout with 32px gaps on 1200px gives columns of (1200 - 64) / 3 = 378.67px, which rounds to ~379px.