Design and Prototyping for Drupal

Anatomy of a Grid Layout

960 (and many other grid systems) work like this: you start with your container width. The container is just that; it contains your grid columns. Regardless of the number of columns (12, 16, or 24), in each container div, you’ll have a series of <divs> inside the containers, each of which has a certain column width, denoted by the class grid-[number]. So, for example, let’s say I have a layout like Figure 6-5, with a 12-column grid, a content area of 6 columns and 2 sidebars of 3 columns each.

Figure 6-5. A sample grid-based layout, using a 12-column grid

If I was building that out in code, it might look like this:

<div id="page" class="container-12">
    <div id="header" class="container-12">
    </div>
    <div id="middle" class="container-12">
        <div id="content" class="grid-6 alpha">
                     <p>Some text goes here</p>
        </div>
        <div id="sidebar-first" class="grid-3">
                     <p>some text goes here</p>
        </div>
         <div id="sidebar-second" class="grid-3">
                     <p>some text goes here</p>
        </div>
    </div>
    <div id="footer" class="container-12">
                     Etc. Etc. Etc.
    </div>
</div>

As you can see, each of the horizontal sections of our layout—header, middle and footer—is given a container class, while each vertical section in our layout gets a grid class with a number corresponding to the number of columns we want the section to have.

In addition to the grid values, 960.gs also has push and pull classes that will apply ...