Grid repeat() Count From Gap & Width

Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.

Description

Fixed-width grid tracks fit only when their combined widths and intervening gaps fit the container.

Fixed-width grid tracks fit only when their combined widths and intervening gaps fit the container. CSS auto-repeat still uses at least one repetition even when a single requested track overflows.^[1]

Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.

When to use Grid repeat() Count From Gap & Width

Use this tool to calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.

How to use Grid repeat() Count From Gap & Width and understand its results

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
Enter containerWidth, trackWidth, gap using the field table and calculation rules, then run the tool.
Read fitCount, repeatCount, oneTrackOverflows. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
containerWidth	Container width	number; minimum: 0	Required
trackWidth	Fixed track width	number; strictly above: 0	Required
gap	Track gap	number; minimum: 0	Required

Enter a nonnegative definite container width and gap, plus a strictly positive track width in matching units. The tool scales the division to reduce overflow, floors the quotient and corrects a rounded-up count if its total width exceeds the container. fitCount can be zero; repeatCount is at least one. oneTrackOverflows separately reports whether the track width exceeds the container. Unsafe counts are errors.

fitCount ≈ floor((containerWidth + gap)/(trackWidth + gap)); repeatCount = max(1, fitCount)

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
fitCount	Fit count	integer; minimum: 0; maximum: 9007199254740991
repeatCount	Repeat count	integer; minimum: 1; maximum: 9007199254740991
oneTrackOverflows	One track overflows	boolean

json

{
  "input": {
    "containerWidth": 1000,
    "trackWidth": 200,
    "gap": 20
  },
  "output": {
    "fitCount": 4,
    "repeatCount": 4,
    "oneTrackOverflows": false
  }
}

Limitations and assumptions

This covers fixed track widths only, without intrinsic sizing, flexible fractions, min/max constraints or multiple-track repeat patterns. It does not distinguish the later empty-track collapse behavior of auto-fit from auto-fill or perform browser layout.

Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors. A successfully returned false flag is an evaluated outcome; its meaning is explained above.

Alternative or Complementary methods

Use grid-template-areas Row/Column Counter: Count rows and columns in named grid-area row contents and validate uniform width and rectangular named areas. For a complementary task, use Flex Grow Space Distribution Calculator: Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.

References

Grid repeat() Count From Gap & Width — tool.io

Similar or alternative tools

grid-template-areas Row/Column Counter
Count rows and columns in named grid-area row contents and validate uniform width and rectangular named areas.
Flex Grow Space Distribution Calculator
Distribute positive free space across unfrozen flex items, including partial filling when grow factors sum below one.