The 960 Grid System – Web Layout Design Made Easier


Sometimes the best website design tool is no tool at all.

It is common practice to jump right into a website's code when trying out different layout ideas, however this can easily become a tedious and time consuming task. Turns out sketching different ideas by hand is much more efficient when trying to figure out the best way to size and position elements on a webpage. Unfortunately this process comes at the terrible expense of transforming irregular and free-form sketches made into valid CSS / HTML code.

Luckily, there is a solution to this problem. It's what's known as the 960 Grid System.

The 960 Grid System

The 960 grid system is an effort to streamline web design by providing commonly used dimensions based on a standard 960 pixel width. There are 2 variants: 12 and 16-column format which can be used together or independently. There is also a 24-column format if you're doing something really funky.

The 960 Grid System is delivered as a standard CSS file you can include on your website and contains all the code necessary to effortlessly place content the way you sketched it out on the printed 960 grid. You can download and print the grid for the 960 Grid System (PDF format) and use it to sketch your website layout, there are also Adobe Photoshop grids you can download too

With the printed grid, you can easily trace your elements and position them the way you see fit. The process of converting these sketches to code becomes extremely easy since you now know exactly how many columns-wide each element is and already have all the spacing and formatting done for you.

Converting Sketches to Code

So you've printed your 960 grid, sat down with the client and ran through some ideas and came up with a great looking layout – now what?

Let's say you opted for a 12-column layout. On one row you decided to place 3 equally-sized elements, and directly below 2 equally-sized elements. You would code this like this:

<div class = container_12> <div class = grid_4> element 1 on row 1 </div> <div class = grid_4> element 2 on row 1 </div> <div class = grid_4> element 3 row 1 </div> <div> </div> <div class = grid_6> element 1 row 2 </div> <div class = grid_6> element 2 row 2 </div>

In this example, we first defined that we are working with a 12-column layout by specifying the parent container class as "container_12 ″ – a container with 12 columns.

We then specify our first child container with the class "grid_4 ″ – in other words a container 4-columns wide (4/12 = 1/3 of the total width).

We finish with 2 more containers 6-columns wide by specifying "grid_6 ″ as the class name for those containers. Grid_6 being 6 columns wide, 6/12 = 1/2 of the total width of the page.

That's It, Really

There is nothing else to worry about. The CSS magic will take care of everything else; margins, positioning, etc.

There are some other neat classes you can include with your containers for even more control, but we won't get into that right now.

The idea is that if you are looking for an efficient way to sketch on paper website layouts and be able to easily code the layout than I strongly recommend you look into the 960 Grid System.


Leave a Reply