I am available for freelance work - HIRE ME

The Awesome 960 Grid System

posted by Matt Ward on Aug 27, 2009.

In this post, we take a look at the awesome 960 Grid System. This tool allows web designers to build their sites up around a 12 or 16 column grid and supplies the necessary style sheet for creating content elements that fit perfectly into that grid. Have a read – it could be well worth your while!

The 960 Grid System is a great development tool for web designers. It’s so great, in fact, that I wanted to share it with anyone who might not have heard of it

The system is pretty much entirely based on a single style sheet that, when linked to your documents, creates a simple and user friendly grid-based framework for developing your site. You then use a series of classes to establish a direct link from your content to the style sheet. The grid system takes care of all the rest.

The 960 Grid System Website

The 960 Grid System Website

As the name would imply, the system works on a base of 960 total pixels, which is subdivided into either a 12 or 16 column layout. With the 12 column layout, each column measures precisely 60px in width. With the 16 column layout, the columns measure 40px. In both cases, columns are separated by a 10px margin.

Of course, you would never actually want to display 12 or 16 columns, so the system is designed to allow you to establish how many columns you want a particular element to take up. For instance, if you were using the 12 column layout and designing a page where you want to display a primary content area and a sidebar, you could use one area that stretched over 8 columns and another that would stretch over 4. Or you could have three equal areas of 4 columns each. As long as the number of columns add up to 12, they will automatically fall into the grid beside each other.

That’s pretty sweet.

But why 960 pixels? Is that just some random, cool sounding number? Not at all. In fact, 960 is a very special number, a fact which is supported by some simple math. This blurb from the 960 website gives a pretty simple explanation:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

There you have it. It’s a nice even number, which happens to fit the proportions of most modern browsers and which can be divided every which way.

So what’s the advantage of the 960 system? Well first, and foremost, it allows for rapid prototyping. Link the style sheet to a simple HTML document with some placeholder text and add a few key class names and bingo, you have a simple wireframe layout that you can present to clients as part of an early stage proposal.

After your proposal, you also have the starting point for your design too, which can help keep you on track. Plus, when you consider that the 960 website has design templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGaffle, Photoshop, Visio and Expression Design, chances are there is a template to match whatever design environment you favour.

Above all, though, it simplifies the development process, so that you don’t need to spend time coding styles for basic layout elements. This is especially valuable if you are just starting out in CSS, or are making the transition from the old-school table-based layouts that still permeate much of the internet (if you are still using tables, please consider this your enlightenment).

The 960 Grid System also has the added benefit of predictability. The style sheet is pre-coded and tested, so you know exactly what you are going to get – even more so after having designed a few sites this way. And, as any experienced developer would tell you, there is an almost immeasurable value to predictability in any system. For this reason alone, I would recommend at least trying the 960 Grid System.

Lastly, don’t think the system will in any way inhibit your creativity. All of these sites have been designed with the 960 Grid System!

One Hub Website (currently has a newer design)

GoBible Website

Tapbots Website

Tapbots Website

Avalonstar Website (new version is totally different)

Avalonstar Website (new version is totally different)

As you can see, while they all use the same basic grid system, they are all also very different. When it comes right down to it, the grid itself is just a tool, a way to give your site some basic shape and form in the context of HTML and CSS. Beyond that, what you do is entirely up to you!

In case you’re wondering, as of the date of this posting, Echo Enduring Media and the Echo Enduring Blog do not use the 960 Grid System, but that may change when I eventually get around to doing a redesign of the sites. Not that I have plans to change anything major here anytime soon. I have too many other projects to get caught up on!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Aug 10, 2010

pixakt says:

wow. this is amazing. i always search for something like that. U perfectly made my day. wohoooo.

Leave a Comment

Links

  1. CSSFind

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014