The 960 Grid System

If you have any experience laying out websites in CSS, you know that browsers can be tricky and that layouts don’t always go as smoothly as you’re photoshop document dictates. I began working with grids a few years ago when I was involved in the Toronto SUN redesign. If you visit the site, you can see that everything lines up properly and that element widths are consistent. Taking this concept another step further, 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.