I have been using the 960 grid system for almost 2 years now. It is really helpful especially during the initial stages of development when you are trying to get the first page out. It provides a clear structure and is especially helpful when you are working with a programmer.
The main structure looks like this:
<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>
The container specifies how many total columns exist, either 12 or 16 (or even 24). For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.
If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.
It’s all pretty simple and straightforward – and it works! View a template here. The creator of this highly successful grid system is Nathan Smith – he’s such a good guy too!
If you wish to use a fluid or elastic layout – there are variations of this grid system available as well . . . Typogridphy allows you to create grid layouts which are versatile and great looking. Fluid 960 is for fluid layouts and includes Jquery or Mootools effects to get your prototype out really fast.
