CSS Grid Track Sizing Calculator
Calculate explicit fixed and fractional grid tracks after subtracting container padding and gaps.
YOUR CALCULATION
Result
—
Calculation steps
Work through one step at a time or reveal the complete calculation. The steps use your current inputs.
How to calculate
Count all fixed and fractional tracks when subtracting gaps before distributing remaining width.
Remaining=width−2padding−gaps−fixed widths; each fr width=remaining×weight/sum(weights)
Worked example
A 1000 px area with one 200 px track, two equal fr tracks and two 20 px gaps leaves 380 px for each fr track.
Assumptions and input details
One row of explicitly listed tracks; no intrinsic minimums, min-content, auto-fit, spans, borders, scrollbar or actual CSS layout engine. Fixed tracks precede fractional tracks in the output.
Using this calculator
Can I enter my own problem?
Yes. Replace the example values with your own inputs. The result, calculation steps, tables and applicable diagrams update from those inputs. Blank or invalid values clear the result; example values are never silently substituted for missing inputs.
Are the results exact?
Results use floating-point arithmetic and displayed rounding. Read the formula, assumptions and any stated data precision before interpreting the result.
Is my input uploaded?
The calculation runs in your browser. No account, file upload or external AI service is required. Inputs are not saved between page reloads.
Enter a screen diagonal and pixel resolution to calculate active width, height, aspect ratio, pixel density and pitch, with a dimensioned screen diagram.
Count equal-size sprites that fit an atlas with explicit outer margins and inter-sprite gutters.
Enter two known points and a target x or y. Calculate the other coordinate, view the straight-line model and clearly distinguish interpolation from extrapolation.
Reserved advertising space.