Last updated May 15, 2012. Created on March 1, 2011.
Edited by LewisNyman, drumm. Log in to edit this page.

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>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.