Introducing Grid.Guide

Any designer will know that ensuring our designs are pixel perfect can be a tiresome and frustrating process. We’re always on the lookout for new tools or apps that can make this process a little bit easier.

One aspect of web design I’ve always felt could be improved has been the process of calculating column and gutter widths. At the start of a design, it’s not a big issue but as a project evolves, maintaining consistency over grids and guides becomes a constant battle.

Until now, calculating widths — especially within nested spaces — has been a frustrating, manual task. Rather than saturating a PSD with heavy quantities of guides, I find myself resorting to creating a folder full of shapes to align layers to.

Agreeing it was time to solve this problem for ourselves, we created and open-sourced Grid.Guide. It’s a free web tool designed specifically to assist in the calculation of whole pixel grid widths.

Once you have a maximum container width and the quantity of columns you need; Grid.Guide will generate and display all combinations of widths you can use.

To make it even easier to use, Grid.Guide will automatically create PNGs you can download or drag straight into your designs. You’ll be instantly ready to align objects without having to mess around with guides and shapes.

We’ve designed this tool to solve a problem we experience in our day to day workflow, yet we know that everybody works in a different way. If there’s a feature or piece of functionality you’d like to see to help it adapt into your style, we’d love to know so please get in touch.

So go check it out at Grid.Guide