CSS Grid Calculator

Working Backward from a Fixed Container to Pixel-Perfect Columns

CSS Grid handles proportional column sizing automatically with fractional units, but there are still plenty of cases — fixed-width layout systems, matching a design mockup measured in exact pixels, or generating grid CSS programmatically — where you need to know the precise pixel width of each column ahead of time, gaps included.

The Formulas

Column Width = (Container Width − Gap × (Columns − 1)) ÷ Columns
Row Height = (Container Height − Gap × (Rows − 1)) ÷ Rows

Gaps only appear between tracks, not around the outer edge, so an N-column grid has only N−1 gaps to subtract before dividing the remaining space evenly among the columns. The same logic applies to rows when a container height is specified.

Worked Example

1,200px container, 4 columns, 24px gap
Step	Value
Total gap space	24px × (4 − 1) = 72px
Available width	1,200 − 72 = 1,128px
Column width	1,128 ÷ 4 = 282px

Doubling the gap doesn't just add extra space — it eats directly into column width, since gap space and column space compete for the same fixed container width.

Where This Matters

Matching a design mockup exactly — when a designer specifies exact pixel column widths, working backward from the container width confirms what gap value produces that result.
Generating grid CSS dynamically — tools that build layout code from user input (page builders, CMS layout editors) need the underlying arithmetic to output correct grid-template-columns values.
Mixing CSS Grid with fixed-width elements — when a grid needs to align with fixed-width images, cards, or embeds, knowing the exact column pixel width in advance avoids awkward rounding gaps.

How to Use This Calculator

Enter the Container Width in pixels.
Enter the Number of Columns.
Enter the Column Gap in pixels (optional).
Optionally enter Container Height, Number of Rows, and Row Gap to also calculate row height.
Select Calculate to see the resulting column width (and row height, if provided) along with ready-to-use CSS.

Related Calculations

Check which breakpoint a layout falls into with the Responsive Breakpoint Calculator, or verify text stays readable against its background with the Color Contrast Ratio Calculator.