Photoshop Grids

Photoshop grid templates for various screen sizes and common constraints.

768x1024 iPad portrait mode

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.

Tablet, mobile, & email

  • iPad: 1024x768
    Landscape orientation
  • iPad: 768x1024
    Portrait orientation
  • iPhone: 640x960
    Portrait orientation
  • Email: 640px

Desktop environments

  • Standard: 972px
  • Widescreen: 1144px
  • IAB-Friendly: 1000px
    (Allows for a 320px-wide sidebar that can house a 300x250 unit with 10px of padding.)
Download The Grids (zip of PSDs)

Make it better

If you have feedback or would like to contribute, please check out the project on GitHub.

Made by Rob Flaherty (@robflaherty).

Fork me on GitHub