960 Grid System for CSS Layouts

With the past few websites I've designed, I've been experimenting with the 960.gs CSS grid system. I wanted to kick its tires for a more systematic approach to implementing CSS for various layouts. Although I have found it to be a little trickier than it looks, I am finding myself more and more pleased with it as a tool for accomplishing CSS layouts and avoiding HTML tables to accomplish similar goals. (That debate, of course, is a tired one in the web design industry.)

If you are not familiar with this project, it was created by Nathan Smith as a free open-source style system. The limitation, which I have accepted for many of my designs, is a page confined to a straight 960-pixel static width. Nathan describes it thusly:

"The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem."...

"The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements."...

"The 960 Grid System is free to use, and may be repurposed to meet your specific needs."

-Nathan Smith

One area that I have found helpful in this process has been to map out their demo.html page to really visually see what CSS is being used to accomplish various "rows and columns" of content. I literally sat down, printed out the html page and drew out the various classes being used on various divs. It made it much clearer how they worked together, I thought.

Contact me if you'd like to see a copy of my rough sketch -- but on the other hand, sketching it out for yourself may help you get a good feeling for what's really going on in the code. You'll have to really dig into the code and get your hands dirty when you make your own layouts with it, anyway!

On the Road,

Eric J. Reid