Calculate pixel-perfect grid columns
A quick and simple tool to calculate pixel-perfect grid systems
Both Photoshop and Sketch provide simple forms to create grid-column guides, but they essentially put the onus on you to have already calculated your exact measurements. This may not be a big issue to many designers who have their boilerplate design files, but every once in a while, even I'll need to calculate some columns on the fly.
Photoshop's guide layout
Photoshop provides the necessary inputs fields, but you're required to know exactly which numbers to enter. The preview option may actually be detrimental, because it allows you to eyeball your guides. Not exactly the most precise way to measure pixels.
Sketch's layout settings
Sketch gives you a fighting chance, but it's results can actually be disingenuous. It will falsely lead you to believe you have pixel-perfect columns when it rounds up decimals, leading to unevenly-distributed columns.
In this screenshot, a 20px gutter should calculate to a column of 101.6666667 pixels. This feels in conflict with Sketch's distribute function which constantly warns you of sub-pixel placement.
Pre-calculate it with ease
I built a simple calculator in Excel that highlights non-decimal columns and gutters. I extended the same calculations into this online version below. Simply provide your canvas width, side margins, and then scan the results for your desired column/gutter ratio. Give the calculator a quick spin below. You can also access it in this standalone page or download a local version of it in Excel.
- Calculate pixel-perfect 12 column grids. A quick and simple tool to calculate pixel-perfect grid systems.
- Instant FAQ. A concept to serve quick answers to common questions in a single page experience.
- Keyboard touch. Make your keyboard a tactile touch input device.
- Food query. Quick query of 3,000+ food items with a simple array.