The net tut article is very good, but I have some more to share. Learning Grid960 was very painful for me. Most of this is reiterating the net tuts article. This gives intuition for newbies, since it was such a headache:
Synopsis
Newspapers and magazines use grid systems with gutters in between, and it makes the page look much more pleasing to the eye when you use the design techniques. The grid will guide you perfectly. Before we begin you must understand CSS/HTML nesting.
<div class="a">
I include all the items A.
<div class="b">
I include all the items of B with all of A.
</div>
<div class="c">
I include all the items of C with all of A. B is not here, but it is on the same level.
<div class="d">
I include all the items of A with C and D
</div>
</div>
Look at the example file to see how you can break your design into a grid.
Use the inspector by pressing F12 in Chrome + IE + Firefox(Thanks Larry!). Highlight the boxes to see how the css is edited. I find it very difficult to dive straight into Grid960's css files. You'll see how each grid is created
Declare a 12 size grid as a parent div. The children divs must add up to 12 and you can break up the page any way you want it. Example: 3 grid + 3 grid + 6 grid = 12 grid. 3 grid + 4 grid + 4 grid + 1 grid = 12 grid. You can see this if you use F12 in Chrome. Highlight the grid in the example file. Don't forget to add the div clear when you are done with a row and want to begin a new one.
<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>
<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>
<div class="grid_7">B</div>
<div class="grid_5">C</div>
<div class="clear"></div>
<div class="grid_12 spacer">D</div>
<div class="clear"></div>
<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>
<div class="clear"></div>
<div class="grid_12 spacer">I</div>
<div class="clear"></div>
<div class="grid_4">J</div>
<div class="grid_4">K</div>
<div class="grid_4">L</div>
</div>
Suffix and Prefix:
Say you want your grid to start in the middle. It does not suffice to declare a grid 3 by itself. You need to give it an extra piece of info stating that I want it to "float." This is where suffix and prefix come in. Prefix means to skip x amount of divs and suffix means to skip x amount of divs after it.
From net tuts
Alpha and Omega:
If I want to apply a style and have it reach over several grids including the gutter space. Alpha is the first and omega is the last div it is applied to.
From the net tuts
Push and Pull
This is for Larry! Push and pull is for developers wanting to rearrange there pages for SEO.
http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html
Notice how the pink and yellow classes are reversed, however the divs are arranged in the opposite fashion?