Wordpress Theme Designer – Patrick Sy

High Quality Custom Designed Themes

Wordpress Theme Designer – Patrick Sy

960 Grid System

Slicing templates from a psd file sure can be a messy job at times, this is specially true if the designer has no background whatsoever to html. One very helpful tool, or rather, system to use in designing web pages is the 960 grid by Nathan Smith. This system’s principle is simple – to make use of a highly flexible width-dimension to layout a page visible to the most common user-screen-resolution; In this case, a 960-pixel base width.

Note: demo files available to download from the website

Why use 960 ( pixels )

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.

Laying it out

This system comes with two variants: a 12 and 16-column layout, one that’s based on partitions of 60-pixels wide the other 40-pixels wide, respectively, each with a 10-pixel margin on both sides.

Here is a screen-shot of the the 12-column layout:
960 grid system 12-column

And here is a the 16-column layout in action:
960 grid system 16-column

The premise of the system is ideally suited to hasten prototyping, and as with all other systems, may seem confusing and intimidating to use (only) in the beginning, but believe me, it’s worth the time to learn as it will go a long way when you get used to designing with it.


Overall, the 960 grid is truly a systematic approach to slicing up a template -one that has the potential to cut production time in half ( if used correctly, me thinks), take note however, that it is not an all-in-one solution to your css and layout issues but merely a guide to follow. In the end, you may or may not choose to use it, but the important thing to remember about this system is the way it approaches the layout.

You can choose to use any number (apart from 960) that you wish as a base for your width as long as you keep in mind the principle behind the 960 grid system -which by the way is the great thing about it, just remember the concept and you won’t find yourself limited to a certain number. The important thing is not the mastery of the tool, but the mastery of the concept behind it.

Learn the rules, so you know how to break them -as needed.

8 thoughts on “960 Grid System

  1. Is this WP theme free or premium? nice blog btw!

  2. the articles on this submit is really a single of the most effective substance that I’ve actually arrive throughout. I adore your publish, I will are available back again to examine for new posts.

  3. Sue Groesser says:

    It can look that anybody is into this stuff as of late. Don’t truly grasp it nonetheless, however thank you wanting to describe it.

  4. Great blog post.Really looking forward to read more.

  5. brill blog you got here, cheers for the hints i learnt, i have bookmark your site and return often to check it out for new posts, many thanks on your good work

  6. I’ll be sharing this with my network. Very pleased with your style, thanks! I will come here again.

  7. Good infomation here, thanks.

  8. My mother and I would like to develop a blogging site much like this for our internet site, I stumbled across your site looking for ideas on the theme along with page layout. I am taking some html coding class while attending college but not certain that I would have the capacity to create a site like this one at this time. Did you code this blog all by yourself or hire a qualified?

Comments are closed.