This is an old site that holds my archived blog. View the new site at jameslindeman.co.uk.
Notes on a chosen grid design and some other resources.
The recent issue of A List Apart featured Ethan Marcotte and his method for creating fluid grids. It’s a great article that puts some good weight behind any argument for using liquid layouts. As the article suggests, to see a working example have a look at Ethan Marcotte’s personal site where he’s experimenting with the idea. Even more recently, the SimpleBits site has also been updated and is now on a fluid grid too.
As the article points out, big stumbling blocks for liquid layouts are images, video and other such content that’s not so scalable. Although I completely agree none of that should stop us trying out new ways of working.
Either way, whether you use liquid layouts or not, one thing most people should agree on is using a good grid. So whilst I continue to develop my own ways of working, I thought I would explain the grid I settled on for this design. It’s nothing clever, just a grid but hopefully it may be of use to someone else.
This 12 column grid is 918px wide with 60px columns, 18px gutters and a 6px baseline. The theory being that all widths and heights are divisible by 6. From setting a 12/18px body style, the division of 6 fits quite well.
Although I set 6 as the baseline, I could also say everything is divisible by three. That means when working with thirds there is already that natural rhythm running through the grid horizontally and vertically.
How you might implement that into your CSS obviously depends on if you’re going to use a fluid grid (mainly percentages), an elastic grid (ems) or a fixed grid (pixels). I’m not sure there’s a superior method, I think it really depends on the job and the priorities of the design.
Using pixels is simple and now thanks to the aforementioned ALA article, there’s a great resource for anyone calculating percentages. Ems do not have to be difficult either. By resetting the body size to 62.5%, 1 em is equal to 10 pixels which makes your grid much easier to specify. An idea from Mark Boulton I believe.
For a basic example of the conversions for this grid, here’s some CSS properties for a page containing a header, two equal columns and a footer.
#wrapper #header, #footer { width:918px; }
#column_one, #column_two { width:450px; }#wrapper { max-width: 91.8em; }
#header, #footer { width:100%; }
#column_one, #column_two { width:49.0196%; }#wrapper, #header, #footer { width:91.8em; }
#column_one, #column_two { width:45em; }Remember by reseting the body size to 62.5% I am just dividing the grid’s pixel values by 10 for the em values.
Comments are now disabled for this entry.