Grid alignment without frameworks

Warning This article was written over six months ago, and may contain outdated information.

When building a small site or blog template with a grid-based layout I find ‘CSS frameworks’ such as Blueprint and YUI Grids are overkill; they contain a lot of extra CSS rules which I don’t use. They are (in the vernacular) like using a sledgehammer to crack a nut.

What I do instead is much simpler; I use an extra stylesheet just for testing, and a single PNG image tiled across the background.

The PNG is in a reverse ‘L’ shape with a coloured area representing the gutter between columns, and the white area the column width. Here’s one I made earlier:

Grid tile

I call the tiled image from a stylesheet I usually call ‘testing.css’, which has just a handful of rules:

body {
background-image: url('grid.png');
margin: 0;

div { background-color: transparent; }

Obviously the exact rules are up to you, but the idea is to align the site over to the left, tile the grid image across the whole page, and make all the structural elements transparent so you can see the site overlaid onto the grid and make any necessary code changes. This image shows an example of this in action.

So as you add new elements to the site you can quickly drop a link to testing.css in with the rest of your stylesheets to test the alignment, then remove it (or comment it out) when you want to proceed with the rest of the build. This is a quick and easy way to get your site laid out to the optimal alignment to a grid without using a framework.

Comments are closed.