Simple CSS gridding

Monday 15 September 2008

I thought I wrote this article a while ago, but it seems to have disappeared. Anyway, in this session we will be creating a simple generic CSS gridding system that will allow your site to be split up into columns. Columns make it easier for visitors to follow your content and provides a clear structure to use with your site.

This is a sort of CSS framework, but it is very easy to use – with notations such as the below:

<div class="spans-4 columns"></div>

That will create a division that spans four columns. Simple. But what is there to it?

First, we will define the .columns class – general to all the divisions we want to make into a column. Basically, they are floated to the left, so that they can exist side by side and don’t push each other down, have a margin-bottom to push the next set of columns down, and don’t clear (push down) the elements around them.

.columns {
    float:left;
    margin-bottom:18px;
    clear:none;
}

Now, the .spans-n classes define how wide the column division will be. There is no shortcut to this – we just have to define them all.

.spans-1 { width: 80px; }
.spans-2 { width:160px; }
.spans-3 { width:240px; }
.spans-4 { width:320px; }
.spans-5 { width:400px; }
.spans-6 { width:480px; }
.spans-7 { width:560px; }
.spans-8 { width:640px; }
.spans-9 { width:720px; }
.spans-10 { width:800px; }
.spans-11 { width:880px; }
.spans-12 { width:960px; }

As you can see, our widest column spans 12 single columns and is 960px wide. 960px is a good value, as it fits nicely onto the most common screen width, 1024px, with room for browser chrome, and has many factors.

Now, we are almost finished. However, at the end of every row of columns we need to clear the columns to the right, so that they start a new line and don’t float off the screen. To do this , we will create a new class .last, which is given to all column divisions at the end of a row.

.spans-12, .last { clear:right; }

And we are done. For examples of usage, just have a look at the source code for the various pages on this site. There is also a way to display a visual grid so you can see the columns in action – but it is hidden!