Blog

Why I often use a 24 column grid

By Graeme Blackwood | 19th April 2012
24 column grid design for Deeson Online

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...

Comments

That's a great input about common questions we all have about grids nowadays... Thanks for that article!
N/

Ron's picture
Ron
Ron

It seems that the premise of 12 or 16 or 24 is somewhat questionable, at least when considering the current direction of usage. These seem all to deal with pixels. It seems to that if one were to use a grid, it would be best to use one more oriented to percents and one that would be responsive to scale. Why try to deal with pixels and fractions there of when, say, a grid of 100 (extreme) or 20 would be more easily translated.

Using the 20 grid example, then items would be in 5% increments, or a 25 grid in 4% increments, or (as an extreme) 100 grid in 1% increments. Seems like the overall design, layout, and css implementation would yield a very responsive site.

Are there others that consider or use this method.... what are pros/cons?

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Hi Ron,

You're right, pixel grids have been a bad idea for quite a long time now, but the spirit of what I was getting at here wasn't really about pixels vs percentages, but that higher column counts when used correctly (i.e. by grouping them consistently in a design) can produce more unusual layouts.

Taking your suggestion about 5% increments – Nathan Smith of 960.gs fame has produced a new grid system called "Unsemantic" – http://unsemantic.com which uses 5% increments. Because the increments are not "6 columns" or "3 columns" but rather percentages of a whole, they nest perfectly.

Bootstrap 3 (http://getbootstrap.com) has taken this same approach, but continues to use the "col-6" language even for nested columns, which is interesting but a little dishonest because what that is really doing is col-(50%). But it works well and is very powerful.

Thanks for joining the conversation!

Graeme

http://twitter.com/graemeblackwood

I've just found your article on 24 columns grids. I'm surprised that not more people understand one of the basic uses of such a grid. A grid of 12... Why is it twelve and not 14, or 16 ? For me this is simple math : this is made to be the smallest number than can be divided by a large amount of numbers, which are 1, 2, 3, 4, 6 and 12. However, at some occasions, I needed to cut the space into 8 equal columns. And the lowest number permitting division by 1, 2, 3, 4, 6, 8, 12 and 24 (which I don't think I would use).
Sometimes, 6 is just not dense enough while 12 is too dense. Well, you get the point.

Thanks for this, Graeme. I have a Wordpress design editor (Headway Themes) that uses a 24-column grid and I had no idea what to do with it. Luckily, your article was easy to find on Google.

Aztech's picture
Aztech
Aztech

I like to use a 12 column grid, with the 24 as an overlay to aid more granular alignment, I think I would find the 61px / 143px / 225px column groups (due to the 21px gutter) a little annoying, but there is nothing inherently wrong with that. http://Top10UKWebsiteHosting.co.uk

Emiliano's picture
Emiliano
Emiliano

Hi Graeme,

I came across this post while checking if someone else had gone through the trouble of creating a true golden ratio grid, and i'm surprised to know that not many people tried it.

Based on your post (and that I much prefer using a 24 col grid), I started playing around with the gutter and margin size, etc.. and noticed that if you make a 975px grid with a 6px margin, 20px cols and 21px gutters, you get an almost exact pixel ratio ( being off by only a couple of pixels)

If the grid is 975px width with a 6px margin it leaves you with a usable area of 963px. The golden ratio applied here leaves us with 368px + 595px. In real life that translates to the closest numbers, which in turns becomes 594px + 21px (gutter) + 348px, resulting on a ratio of 1.62

:D

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Hi Emiliano,

Interesting! Because in principle I like to use a 12 column grid, with the 24 as an overlay to aid more granular alignment, I think I would find the 61px / 143px / 225px column groups (due to the 21px gutter) a little annoying, but there is nothing inherently wrong with that.

Good to see you experimenting further with this. Thanks for sharing!

Personally, I'm a big fan of the semantic grid system. It uses less to keep your markup clean and it's configurable to use as many columns as you need, in whatever sizes you want them...
http://semantic.gs/

It does need some tweaks on push and pull classes though (unless I understand those in the wrong way)...

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Thanks for sharing, Thijs. Do you know if this has been ported to SASS? I get the impression increasingly that SASS is becoming the standard.

I don't think so, but it shouldn't be that much work to port it. I still haven't got myself to use SASS, it just seems more verbose, and doesn't seem to offer that much over LESS...

Are you using SASS?

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Well it is as about verbose as CSS is, but that is I think why it is being picked up more, because it feels less of a learning curve.

Also there are noises that CSS4 may be close to SCSS in capabilities and syntax, so that is another reason: http://thesassway.com/articles/how-sass-can-shape-the-future-of-css

Strange, I feel the syntax of Less is much closer to CSS (as it is now) than SASS, making it a lot easier to learn...

Personal preference I guess :-)

Jeff's picture
Jeff
Jeff

I should have added 24 column to the golden grid and pixel widths

Jeff's picture
Jeff
Jeff

Have you attempted to apply the golden grid to 1200px or 1140px?

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Hi Jeff, no I haven't tried yet. Actually I am experimenting a lot with percentage grids at the moment because I want to make my default build approach a responsive one.

Having looked at (I think) most of the responsive grid systems out there, Nathan Smith of 960.gs has been working on a different, very interesting approach that I think might work for me with a bit of tweaking. I encourage you to check it out: http://host.sonspring.com/fluid-grid/

Add new comment