Calculate pixel-perfect columns and gutters

A quick and easy tool to calculate pixel-perfect grids


As we design in columns and grids, everything is spaced according to math, whether it's 4, 5, 6, 10, 12, or any number of items across a certain space.

Say you have a module that you want 4 boxes across. If you've already set up your 12 column grid, then you're covered. But what if it's 5 boxes? Or what if your container has some inner padding, so those 4 boxes no longer adhere to the 12 column grid? There are any number of scenarios where you need calculations on the fly that fall outside your base 12 columns.

So do you eyeball it? Shame! Seriously. Shame on you. But how do you know what size to make those elements to space evenly across? And if you're like me, you absolutely hate dealing with sub-pixels. Who on Earth loves distributing elements across only to be met with this lovely dialog?

So I built this simple tool here, also available as an Excel doc. Over time, you get used to punching in numbers real quick. Total width. Side margin width (just for one margin, not both). And number of columns. Voila. Choose a gutter width that feels suitable for you, then look over to the right. That's the exact pixel size to make your columns/boxes. Punch that in and breathe the fresh air of pixel perfect distribution.



Column & Gutter Calculator

Enter your total canvas width, side margins, number of columns. Results will show only gutter and column widths that are exact pixels.

Gutter width
Column width

8

76

20

65

32

54

44

43

56

32

68

21

80

10



Also check out