Back in December Cameron Moll wrote an extremely popular blog post called Gridding the 960 about using 960 pixels as a good baseline size for designing for 1024px resolution on web pages and distributed the grid he used in the article for free.
The point of 960px is that it subdivides nicely into lots of equal column sizes so is a very versatile width. It also happens to be slightly less than the minimum width you can actually use when a browser is maximised on a 1024 pixel wide display, taking into account browser chrome (the window edges and scrollbars).
Using Cameron’s grid as a massive starting point I made a slightly modified version in Photoshop which I can switch on and off the various grids as layers and with 1024px and 800px overlays to see how a design gets cropped. It also centres the grid in a 1920px wide PSD which is pretty much the maximum width people are widely using at the moment which I find helpful.
Download the files here: 960_Grid.zip (116kb)
The file ‘Grid.psd’ is the master which can be used as a template to design over, switching the various grids, rulers and browser overlays on and off as required. Also included are PNG files for the 3, 4, 5, 6 and 8 column grids only along with the 960px grid.
Preview of the file with all the grids switched on
The Grid.psd file layers
If you download the files and find this kind of thing useful please consider leaving a comment – I would love to know who is finding my little corner of the interweb handy!
Update 29th August 2007
I found a small error on the 8-column grid which has now been fixed – please download the package again to get the corrected version.
10 Comments
Extremely helpful, thanks!! Splitting the different column sets and overlays into their own layers really makes a difference. Thanks for your work on this.
posted by Marla Erwin, Feb 13, 05:11 PM
Hey… i loved your grid, but why the background have 50×50 px?
posted by Renata Crisóstomo, Jun 15, 07:03 PM
great Job… You saved me a lot of time :-)
posted by Edoardo Piccolotto, Jul 9, 08:34 PM
Thanks for that. I alway s struggle to make my own ine anytime and it is alway somehow different – I just cant help esperimentig – now I will have one truly consistent grid. :)
posted by mojito, Oct 20, 08:15 AM
Thanks for this one! keep it up :)
posted by Adiwijaya Hadinoto, Oct 26, 06:07 PM
thanks man, very helpfull, saved me a lot of time!!
posted by Daniele De Vuono, Jan 6, 10:10 PM
thanks a lot. it’s very helpfull :)
posted by Andita Pradana, Jan 16, 10:38 AM
love stuff like this, another tool in the toolbox
posted by darrencnz, Jan 19, 03:23 AM
Wow super nice of you to share this!
posted by Dianne, Jan 25, 08:28 PM
For designers working in every medium, layout is arguable the most basic, and most important, element. this effective layout is essential to web communication and enables the end user to not only be drawn in with an innovative design but to digest information easily.
posted by Richard Ball, Feb 16, 09:49 AM