Skip to content

Laying out sub-grids with the 960 grid system

by werner on July 16th, 2010

I am currently reworking the design of my web-site.

I made the old design in 2003 with a site of a few dozen pages in mind – today I have got a few thousand pages. In hindsight, the CSS and the layout techniques that I used are very quirky. I blame it on my lack of experience and on the many little compromises I had to make for IE 6.

Now it is time for a fresh start, and I was looking for a good framework onto which I could base my layout.

The blog at w3avenue.com gives a nice overview over CSS frameworks.

I decided to go with the 960 grid system.

I like it a lot for its simplicity and flexibility. I love it.

The only nitpick I have against it, is the way how sub-grids (grids inside of other grids) are made. As explained on their web-site: “If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega.”

Here is their code example:

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>
        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

I think this is not perfect, because then I have to change the classes of grid elements every time I move one of them to the left or the right or in and out of a parent element.

To avoid this I have created new CSS classes for parent grids. I named the classes parent_1 through parent_16. (I put them into a separate CSS file to keep the 960.css file clean.)

Here is an excerpt of the style definitions I made:


.parent_1,
.parent_2,
...,
.parent_15,
.parent_16 {
	display: inline;
	float: left;
	margin-left: 0px;
	margin-right: 0px;
}

...
.container_12 .parent_3,
.container_16 .parent_4 {
	width:240px;
}
...

This allows me to get down to this leaner code, which does not need alphas and omegas anymore:

<div class="container_12">
    <div class="parent_7 prefix_1">
        <div class="grid_2">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>
        <div class="grid_2">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

From → Web Design

2 Comments
  1. Dear Werner,

    I found your code while searching for an easy parent/child method…
    It really is a drop in replacement and works beautifully!

    Thank you very much!

  2. Thanks Werner. Exactly what I need for a project of mine.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS