If you’ve ever attempted to build a truly clean, cross browser compliant, css based layout then you know that it can take quite a bit of work for everything to come together. One of the tricky parts is getting your horizontal alignment setup.

CSS Framework is almost an oxymoron in that most websites rarely share enough CSS to warrant the overhead or work of building an actual framework. What if the framework did nothing more than handle positioning?

Enter the 960 Grid System.

The 960 Grid System is built on the fact that the number 960 has a high number of divisible whole numbers making it a very suitable width for a column based grid system. Couple this with the fact that most, if not all, of your end users should be capable of displaying a 960px wide site.

The way the grid system works is this. You select either a 12 or 16 column grid system. The 12 column layout has 60px columns and the 16 column layout has 40px columns. Each column has a 10px margin on either side, making a 20px gutter padding between each column.

When you want to make use of the grid system, simply include the CSS files included in the download. Next, you’ll specify a wrapper/container div and with a class name of “container_12” or “container_16”. This sets up the container to make use of grid units. Finally, begin setting up your divs with class names in the format of “grid_xx” where xx corresponds to 1-16 depending on your container size.

An example is available on the 960.gs website. I’ve included it below:

<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...</div>
<div class="grid_3">
...</div>
<div class="grid_2 omega">
...</div>
</div>
<div class="grid_3 suffix_1">
...</div>
</div>

With a multitude of site layouts on my horizon, I am definitely going to make use of the 960gs framework and I’ll report back on how well the system worked in streamlining my design and development time.