Why I often use a 24 column grid

There have been some rumblings about grids with high column counts recently. This got me thinking.

The use of grid systems is comparatively new to web design, and there seem to be assumptions about how they should be treated and behave. All the CSS grid frameworks I have come across have equal column widths for example, or often discuss the golden ratio when they are really talking about the rule of thirds.

I have used a 24 column grid for a while now, and find both its flexibility (not for the reasons you might assume) and its assistance with alignment inside column groups absolutely wonderful.

Firstly I guess I should be clear that I totally get where the critics are coming from. However, I have always had a gut sense that systems and frameworks are guides, not laws. You can choose to be bound by them, but it is so much more interesting to bend them!

Bending the grid

For the most basic use, I find it helpful to utilise a 12 column grid with my 24 column grid as an overlay, to help define spacing, larger gutters etc on internal elements.

Imagine I want to do the following:

  • Use a 12 column, 960 grid, divided 8:4 (620:300px)
  • Add a grey background to the 8col / 620px area and pad by 20px so the internal elements won't touch the grey edge
  • Now I want to create a list of thumbnails in rows, forming a gallery

12 and 24 column grid work well together

The padding on the 620px column means the usable width is now only 580px, so how do you divide up the space? Often this sort of decision seems to be fairly arbitrary, but it needn't be. If you lay the 24 column grid over the 12 column grid, you will find that the internal space can be divided perfectly into 6x 80px wide or 3x 180px wide thumbnails, whilst maintaining 20px gutters. Admittedly, these gutters don't align with the wider grid, but I doubt they would with most other methods either – it's the alignment to the 8-columns that is considered more important.

Uneven columns

Uneven columns

I often take the 24 column grid further than this though, grouping the smaller columns to define more useful, but uneven column widths. Mark Boulton tweeted about this recently, and it is something that those newer to grid systems don't seem to be aware of. A lovely example of this approach is Neville Brody's BBC redesign in 2010. Using high column counts to form groups like this makes the possibilities for diverse grids almost endless.

The golden grid

The Golden Grid

Recently I started experimenting with defining a grid by the golden ratio. I looked about and found a few claiming to have done this, but really they were just using the same 12 column grid and talking about the rule of thirds, rather than the true golden ratio. Whilst they are close to each other, I felt the ratios were different enough to make it worth going for the real thing.

To cut a long story short, eventually I half-stumbled on the fact that the 24 column / 960 grid can be divided almost perfectly into a true golden ratio of 1:1.618. The larger space is 580px and the smaller 360px, becoming 340 with a 20px gutter between the two. This makes the ratio 1:1.611.

With these base sizes, I began experimenting with dividing further with the golden ratio, and also just simply dividing the larger space into two, leaving me with three uneven columns of 280, 280 and 340. What I enjoyed most about all this was breaking away from the same old and really trying something new. The first website that I have used this on in great detail is the new Deeson Online site:

Deeson Online golden grid

Wrap up

So to summarise, I believe grids with higher column counts are ok to use, but with consideration and a general desire to keep to the spirit of alignment that grids were created for.

More importantly, let's start experimenting a bit more with our grids and move things forward! Feel less bound by the rules and more excited about bending them...


  • Usability Study Part 2: The Study

    ... Graeme Blackwood  27th May 2010

    Welcome to part two of our three-part blog on conducting a usability study on one of our Drupal sites. In the first part, we explained what this is all about, our intentions, process and what we hope to achieve.