960 Grid System

The Concept

The 960 Grid System is an effort to streamline web development 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 together. Learn more.

Formats

The 12‑column grid is divided into 60‑pixel columns. The 16‑column grid consists of 40‑pixel columns. Each column has 10‑pixel margins on both sides, creating 20‑pixel gutters between columns. See it in action.

Purpose

The proportions of the system are ideal for rapid prototyping, though it also works well for commercial projects. There are printable mockups, design variations and CSS files with identical proportions.

More Columns

For those who prefer a 24‑column grid, we provide an alternative version. It consists of 30‑pixel columns with 10‑pixel gutters and 5‑pixel outer margins. In Chrome this helps prevent text touching the browser edges, and it’s also optimised for iPhone where lowercase “i” and “l” may otherwise be clipped. See it in action.

Source Order

Using push_XX and pull_XX classes, elements can be rearranged independently of their markup order. This allows you to write more semantic HTML without losing layout accuracy. For example, check the source code of this page to see how the H1 position was altered.

Keynote Wireframe Toolkit – 12 columns  

Formalize CSS – 12 columns  

Assistly – 12 columns  

Trakt – 12 columns  

Sony Music – 16 columns  

Drupal – 12 columns  

Fedora Distribution – 16 columns  

5by5 Studios – 12 columns  

Hugh Griffith – 12 columns  

Panoetic – 12 columns  

Gantry Framework – 12 columns  

Brown Things – 16 columns  

Twitter Media Blog – 12 columns  

Refresh Boston – 16 columns  

51Bits – 12 columns  

onehub – 16 columns  

Four Kitchens – 12 columns  

Second & Park – 16 columns  

Ten Seven Dialogue – 12 columns  

Pixel Dreams – 16 columns  

Tapbots – 12 columns  

VCU Qatar – 12 columns  

AIA – 12 columns  

Pulse App – 16 columns  

Phil Coffman – 12 columns  

Right From – 16 columns  

Black Vineyard Real Estate – 12 columns  

Simplified Safety – 16 columns  

A Better Office – 12 columns  

WooThemes – 16 columns  

Code

See the demo page for all the code.

To the right is an example of how the code works. The container determines whether we end up with 12 or 16 columns. Usually you just need to specify the grid_XX class, where XX indicates the column width.

If a grid contains children, the first child in a row gets the class alpha, and the last child needs the class omega. Also, if you want to insert empty space before or after the grid, use the prefix_XX or suffix_XX class.

<div class="container_12">
<div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
    <div class="grid_2 omega">
        ...
    </div>
</div>
<div class="grid_3 suffix_1">
    ...
</div>
</div>

960

All modern monitors support at least 1024×768 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 property gives great flexibility.

Authors

I drew inspiration from: Khoi Vinh, Cameron Moll, Olav Bjørkøy, Brandon Shauer, Jeff Croft, Mark Boulton, and Eric Meyer. Their work inspired me to create something of my own. I stand on the shoulders of giants.

While CSS frameworks like 960 Grid give you full control over every column and margin, there are situations where you just need a simple web presence without writing code. Many designers start with a visual tool to quickly test ideas, then later refine the layout using a grid system. For example, if you want to launch a portfolio or a small business site, you can create free website from google in minutes. That platform provides ready‑made templates, drag‑and‑drop editing, and automatic mobile adaptation. It’s a completely different approach from hand‑coding with 960 Grid. However, once your project grows and requires custom interactions or complex layouts, you will likely return to a CSS framework. The flexibility of 960 Grid allows you to build almost anything – from blogs to large e‑commerce platforms. Some developers even combine both methods: they quickly build a prototype using a site builder, then export the markup and restructure it with a grid system for finer control. So whether you need a fast landing page or a fully customised design, knowing both options is useful. If you're just starting out, go ahead and create a free website from Google to see how a typical web project feels. Later, you can study the source code, replace the inline styles with proper CSS, and gradually migrate to a grid‑based layout. That learning curve is exactly how many professionals began their careers.

Extensions

In addition to design templates, there are extensions for Photoshop and Fireworks. Download them here. DMXzone also created a DreamWeaver extension and template – free for their members.

Guides

The Web Designer Depot wrote an article about creating more compact code by directly styling tags. “Web Directions” have tutorials and videos. WooThemes published a post called “Why We Love 960.gs”. There are also articles in Spanish [1] [2] and Swedish [1] [2].

Variations

The 960 Grid System is free to use and can be reused for your needs. Several projects have already been forked, including fluid and elastic versions. The system has also been adapted as a Drupal theme.