A smiling face inside a square pixel shape

WholePixelGridCalculator™

About

WholePixelGridCalculator™ is a design tool for creating grids that use whole numbers for all properties. Input your known values, such as the total grid width or number of columns, then explore possible values for gutters and margins. Choose between automatic or fixed column widths as desired. Undo is supported and useful.

Colophon

This website was made by Eric Carl. The typeface is Booton by Displaay. All JavaScript was LLM-generated, while the design, HTML, and CSS were done by hand. It's hosted at GitHub.

Total Width

Columns

Column Width

Gutter Width

Margin

Grid State

Optimal

Suboptimal

Grid