The Almighty GRID–Resources

CREATING A GRID is typically one of the very first things you do when starting a design. After all, it provides the basic structure on which the rest of your design will lie. They help you create sophisticated layout structures which offer more flexibility and enhance the visual experience of visitors to a website. Users can follow the consistency of the pages easier. Grids also help designers and art directors determine the hierarchy of elements on the page. How much space you give an element on the page corresponds to how much importance it has, and a grid helps with this process. This doesn’t apply solely to websites either, grids should be the basis of all designs. To learn more about designing with a grid and examples visit this article on smashing

I came across a number of ways to establish grids using resources and templates found online…


Modular Grid App

THE MODULAR GRID APP works in Chrome, Firefox, Safari and Opera. The Web app enables you to create a grid pattern and download it straight from the browser as a photoshop layer, a png pattern, and a transparency mask. This creates a grid all in one layer, so your guides can be used for other purposes, and the grid can be overlaid in various degrees of opacity so you can make it less distracting as you are designing. You can label the patterns and put them in a folder so you can come back to a grid you made previously.

Guide Guide

GUIDE GUIDE is A photoshop plugin. Instructions for installing it can be found on the GuideGuide Page. Russell Brown from adobe put together a video tutorial you can view by clicking here.


Click on the link above and then click the “big ol’ download button.” The 960 Grid System is designed for web development and provides commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, and you can download a 24 column grid. You can learn more about it when you visit the website.

The Grid  links to a number of grid resources like grid templates, tools, books, articles, and inspiration.





One comment

  1. Thanks for posting all these wonderful resources, Brie. A great book for those who have used a grid for a while is “Making a Breaking the Grid” by Samara. However, you can’t break the rules until you learn them first!

Leave a Reply

Your email address will not be published. Required fields are marked *