The design grid consists of 12 columns, each 60 pixels wide with a 20 pixel gutter space between them giving a total of 960px wide.

Image demonstrating grid measurements.

Columns

Image demonstrating grid columns.

Masthead - Home

Image demonstrating grid use.

Masthead - Content Pages

Image demonstrating grid use.

Correct mark up examples

A three column section


<div class="container-12"</div> <div class="grid-4"> <p>...</p> </div> <div class="grid-4"> <p>...</p> </div> <div class="grid-4"> <p>...</p> </div> </div> 

A main column with sidebar


<div class="container-12"</div> <div class="grid-8"> <p>...</p> </div> <div class="grid-4"> <p>...</p> </div> </div> 

A smaller main column with sidebar


<div class="container-12"</div> <div class="grid-4 suffix-4"> <p>...</p> </div> <div class="grid-4"> <p>...</p> </div> </div>