960 Grid System For Web Designers

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. 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.

Here is an example (taken from the 960.gs site) to show how the grid is used:

This is a shot of a Sydney design company, 51 Bits and below you can see the same website as it is normally viewed.

From the 960.gs website:

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

There are downloadable templates for all the popular applications – below is how the Photoshop template looks:

Do you use the 960 grid system when you design a website?  Have you noticed the grid system being used on any of your fave sites?


Follow Red Instead with Bloglovin Follow Red Instead with Feedly


I help people learn to live creatively and blog sustainably. What does that mean exactly?
Sign up below to find out more.

Jen Leheny

Hello! I'm the owner, blogger, designer, photographer, maker at Red Instead in Canberra, Australia. I also have a photo portfolio at Jen Leheny Photography and there's some work info at jenleheny.com. I like to design and make things in my spare time, which I sell at the Red Instead Shop and at Trove Canberra. And in my other spare time, I rollerskate!