960 Grid System

in Blog

Sample grid layout

The ultra-modern standard for web design these days is 960 pixels wide. Welcome to the 960 Grid System. This concept is easy enough to understand. There is even a web site to support it with a ton of fantastic designs you can use to start your own custom theme with. It is 960.gs. With a known width of 960px the math is done already for you to design just about any kind of site.

The minimum resolution a monitor supports today is 1024px x 768px. 960 is a great number because it has a lot of interesting factors. It is really easy to divide up into useful column sizes. Because of that it is very flexible from a design perspective.

To get an idea of the flexibility examine this page. The examples there show various pixel widths of elements that can safely be grouped together and are pleasing to work with and that have pleasing intervals. An interval (the space between elements.) Pleasing is of course subjective but most people agree that these intervals break up the design enough to give a really good feel of compartmentalization without being too close or jumbled together.

The 960.gs site points you to their GitHub repository where they even have PDF sketch sheets you can use to design your site with. Let’s face it, when you want to design a really good looking website you have to sit down and plan it out on paper. Starting on the computer screen or just by coding is the worst way to start, in my opinion. A good professional begins by creating a plan and going over that plan. It only takes an hour or two to really start forming a design that contains wire frames (i.e. simple drawings of where stuff will be in relationship to to each other on your page) and planned functionality.

Grids produce clusters and organizations that require no interpretation, unless they lack alignment. If they are not aligned then the mind races to try and figure out how things go together. Dislocation and destruction work in art – but unless your site is intended to be about art it most likely is trying to convey information and functionality and any randomness will work against you.

What you save with the 960 grid system is a lot of tedious math. You could do the same thing on your own, but why not save a lot of time and start with this as a base? CSS3 makes a lot of things possible and the 960 Grid System builds upon it. Consider that if you start with a round number, like say 1000 pixels wide for your custom container you can easily divide that by 2, 4 or 5 but not by 3 (which leaves fractions.) The genius in the 960 system is that it will work for any reasonable amount of subdivision.

The CSS classes you generate with the system are reasonably named. gird_1 is the narrowest in either the 12- or 16-column layout while grid_12 is the widest in the 12-column layout and grid_16 is the widest in the 16-column layout. Want a three column set with the 12-column grid? Make 3 DIVs with class=”grid_4″! Yes, it is that easy.

Want to push in from the left or pull in from the right towards the center? Sure, not a problem. Lets say you have an important image, text block or such you want to appear at the very beginning of your HTML but to display laid out more centrally. Assuming a 12-column layout we might have DIVs with the following classes grid_6, grid_3, grid_3. The grid_6 is our important DIV. We simply just need to add an additional class to it called push_3 (which will push it from left to right 3 columns). That would look like class=”grid_6 push_3″ and the result would show up as grid_3 grid_6 grid_3.

Do you want open space in your design? That is easy. There are classes for those too. White space before is added with class prefix_x where x is the number of columns. White space afterward is added with  suffix_x.

This is just a sampler of what is possible with the 960 Grid System. If you had not heard of it before definitely check it out. Here are a few more resources:

The Fluid 960 Grid System

The 1KB CSS Grid

The Variable Grid System

Typogridphy (for typographically pleasing sites)

Tiny Fluid Grid (light weight and very cool looking)

Obviously to get the most of these tools you need to know how to put together a WordPress theme, but if you do this provides a fantastic way of getting everything you need working quickly from wireframe to delivered site.