Check out the Latest Articles:
Tips On Using The 960 Grid System

I’ve really gotten into the 960 Grid System lately (Check out my work on the Dollhouse Recordings site here.). In working with Zach Bard on it, the decision was made to use it. I’d been using the system in a bastardised way for sometime, but with this I wanted to try and go with it.

Honestly, it’s absolutely conveniant and a real life saver to design around. I can’t reccomend it enough. You can download a copy of it at www.960.gs. I decided to go ahead and write up a few tips on using it for the absolute beginner. I might later go ahead and write a short tutorial later on how somebody with only a basic knowledge of CSS and HTML can create a site with it, but for now, here are a few quick tips:

1.) Print out the pages for the 12 and 16 grid if you need a visual aid, but the number of columns is equal to the grid number, grid_2 is two columns wide, grid_7 is 7 columns wide, ect..

2.) If you have a number of columns, Alpa starts the row and Omega ends it. So, your class for a 2 column wide div that starts a row is “grid_2 alpha” and your 7 column wide end to that row is “grid_7 omega”.

3.) Use a wrapper div for just the width of each column. It just helps to keep everything in order. More of a preference, not even one I really follow myself, actually, I don’t follow it at all, but I should.

4.) When designing, try to keep in mind that not everything needs to fall right into one of the columns. You don’t want your site to look like a jail cell, do you?

So, four tips for the beginning coder. Soon, I’ll be writing a tutorial for making a simple website using 960 and I’m working on another for how to write a wordpress theme.



  1. который я уже неделю исчу…

    I’d been using the system in a bastardised way for sometime, but with this I wanted to try and […….