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 input 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.

Gutter width
Column width

8

76

20

65

32

54

44

43

56

32

68

21

80

10



Read more