Clipped Tiles Ruin a Background Pattern
The most common mistake when designing a repeating background pattern is picking tile size and gap without accounting for canvas width. The result is a last tile that gets cut off at the edge, making the pattern look unfinished.
This calculator finds tiles per row using (canvas width + minimum gap) ÷ (tile size + minimum gap), then recalculates the actual gap to fit exactly using (canvas width - tiles × tile size) ÷ (tiles - 1).
Why Fine-Tune the Gap?
Changing tile size alters the pattern design itself, but adjusting only the gap keeps the tile shape intact while making the repeat fit the canvas perfectly. The recalculated gap stays close to your desired minimum while eliminating any clipping.
Where to Apply This
This calculation works for any UI that needs evenly spaced repeating elements — card grids, repeating icon backgrounds, checkerboard patterns, and more. Just plug the calculated value directly into a CSS Grid or Flexbox gap property.
Frequently Asked Questions
If canvas width isn't an exact multiple of tile size, the last tile gets cut off. Adjusting count and gap together fixes this cleanly.
No — tile size stays fixed while only the spacing is fine-tuned to fit the canvas exactly.