Photoshop Grids

What's this?

It's a collection of PSDs with predetermined grids for common design scenarios. Each template contains a columnar grid defined with guides and overlays.

All of the templates use a 12-unit grid, except for the email template, which uses an 8-unit grid. Imitating responsive layouts, units and gutters increase in size (approximately) as the canvas gets bigger.

Gutters are on the large side to offer a little more space for touch interfaces. For better display on mobile and tablet devices, which have fixed viewports and hard screen edges, the outer gutters (container padding) are the same width as the inner gutters.

Some of the widths for the desktop grids might seem weird. Instead of focusing too much on the size of the screen I built these grids from the content out.