960 Grid Sample

This is the breadcrumb, page title, and introductory paragraph (skyblue).

How to use the 960 grid layout system...

You'll want to examine the source to this page as you look at its rendition in the browser. You do not need to peek inside 960.css, which isn't very fun to read even if you read the uncompressed and commented one in the download. The code for the left navigational thumb is:

<div id="navigation-thumb" class="grid_2" style="background-color: pink">

This simply means, "use 2 of the 12 pre-defined columns to implement the thumb."

The code for the middle column is:

<div id="content" class="grid_8" style="background-color: skyblue">

This sets aside 8 of 12 columns for the middle. This is subdivided by:

<div id="left" class="grid_4 alpha" style="background-color: lightgrey">
<div id="right" class="grid_4 omega" style="background-color: silver">

Finally, we set aside the 2 remaining columns (the subdivision of the middle set of 8 columns into two sections of 4 columns each does not count as an addition to the 8) to create a narrow, right column.

<div id="right-column" class="grid_2" style="background-color: lightgreen">

Note that even though no actual div ids exist, using this attribute helps make the HTML more readable. The 960.css class names are themselves illegible.

How does this work?

The clever idea behind this system is to use an arbitrarily high number of grid points (and evenly divisible columns) in representing your page content. Of course, each of your page's elements is usually going to take up at least a couple of the imaginary columns and every other element is an even multiple of them—all with a common denominator. And gutters take up a column (we're using none of those here; this is just a simple example of the 12-column layout). Get it?

Each imaginary column of the 12-column grid takes up 80 pixels. (The whole page is considered to be 960 pixels wide—hence the name of the system).

The 960 grid system also has solutions for more complicated pages such as you can see on their web site. You'll see 12-column grids, 16-column grids (60 pixels per column), 24-column grids (40 pixels per column), 32-column greds (30 pixels per column) etc.

Download

From that site, you'll download a file named nathansmith-960-Grid-System-xxxxxxx.zip. Once extracted, you'll see a folder named code, then another named css. In that folder is where I created this sample (because the 960 system is for web page luminaries using Dreamweaver, Fireworks, etc., but I only hand-code HTML and so didn't understand until I had played around with it.) This document uses 960.css, which is the 12-column one.

For some of my inspiration, see discussion here including an example (right-click and view source) of how to add a header and a footer. See also this page and this one. And, see a more modern system, The 960 Grid Layout System (continued).

This is the left center section (lightgrey).

It consumes 4 of 12 columns.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...

This is the right center section (silver).

It consumes 4 of 12 columns.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...