Calculate CSS Grid Track Widths before the Layout Overflows

How to Use This Tool

Subtract gaps and fixed tracks before distributing the remaining pixels across fr units. Calculate available CSS Grid space, one-fr width, selected flexible track width and total gaps from layout inputs.

The decision this tool supports

The fr unit distributes available space after fixed tracks and gaps, not the container's entire width. This page keeps the decision bounded to space available to flexible tracks and the supporting outputs shown beside it. CSS Grid Track Width does not import an account, infer a market rate, or silently substitute an industry average.

Inputs and units

The CSS Grid Track Width calculation uses Grid container width, Number of columns, Column gap, Total fixed-track width, Total fr units, Selected track fr units. Keep all money values in one currency and all time, distance, mass, energy or volume entries in the unit printed beside the field. Mixing CSS Grid Track Width scopes can produce a plausible number with the wrong meaning.

• Grid container width is entered in px.
• Number of columns is entered in columns.
• Column gap is entered in px.
• Total fixed-track width is entered in px.
• Total fr units is entered in fr.
• Selected track fr units is entered in fr.

Formula and worked check

Flexible space = container − total gaps − fixed tracks; one fr = flexible space ÷ total fr units. A 1,200 px, three-column grid with 24 px gaps, 200 px fixed tracks and four total fr units leaves 952 px, so 1fr is 238 px and 2fr is 476 px. The CSS Grid Track Width default is an executable known-answer case, not a benchmark or recommendation. Change one input and verify that the direction of space available to flexible tracks still matches the stated relationship.

How to interpret the result

Use the result for explicit numeric tracks; intrinsic sizing, minimum content and auto tracks can reduce the free space the simplified model assumes. The additional CSS Grid Track Width outputs expose the denominator, comparison, capacity or reverse value needed to audit the primary result instead of presenting one unexplained number.

Assumptions

• Container width is the grid content box.
• Fixed-track total already includes every non-flexible track.
• No intrinsic minimum changes the flexible distribution.

Save the CSS Grid Track Width input values and date with any material decision. A later CSS Grid Track Width rerun is reproducible only when the same assumptions and units are available.

Limitations and safety boundary

The page does not run the browser's full CSS Grid sizing algorithm, including min-content, max-content, auto, fit-content, minmax or spanning-item constraints. CSS Grid Track Width is an estimate and cannot replace a contract, local code, licensed professional, calibrated measurement, lender statement or platform report where one governs the decision.

Source and privacy

The CSS Grid Track Width definition or rule was checked against MDN — Grid Tracks on 2026-08-26. Recheck MDN — Grid Tracks when a specification or policy behind CSS Grid Track Width can change. CSS Grid Track Width arithmetic runs in this browser tab; ecech does not receive the values through a calculation API.