Not all of us come from a type setting, graphic design or artistic background. I certainly don't. But there's plenty we can learn from people that do.

Today I diced up the layout used by Marketing Magazine (part of Brand Republic)... both very good by the way. After scaling everything to 1020px width, using advanced trigonometry and all the fingers on my hands, I was able to work out that the magazine layout uses 5x172px columns with 20px gutters. I've assumed 2 gutter-widths either side of the design. (It could also be broken down to 10x76px columns with 20px gutters.)

Not only is it clear that everything lines up to those vertical columns, but on closer inspection, the whole design is set to 172px and 20px intervals:

• The 'Marketing' masthead is 172px high with 2x20px margins.
• The height of the single-column image is 172px + 20px.
• The height of the double-column image is 172px + 3x20px. Another 20px gutter space is used for text under the image.
• There are 20px margins above images and at the bottom of text (40px in some cases)

All I hoped to demonstrate by this was that design is not simply about plonking items into a layout. I also wanted to demonstrate that there are other sources of inspiration other than a CSS gallery. Every measurement on the design should relate to some base figure - this means your div widths, your paragraph widths, your paragraph margins, image widths and margins, div spacing... Everything! For further reading you should look up Baseline Grids, Vertical Rhythm and possibly the mathematics of design. You might also want to read about Breaking the Grid. Obviously this is only one approach to design, but I find it's an approach that results in a well balanced and well thought out layout. Using a grid doesn't necessarily have to result in a blocky looking design either. See 960.gs for examples.

Don't expect any of your clients to notice this by the way! They won't notice because everything will look right. If they do notice something it's usually because it hasn't been thought through and is drawing unwanted attention.

As I'm such a nice chap, I've even attached a PSD version of the grids. Hope it's useful!

5 & 10 Column Grid