Download (260 KB) → Templates for Fireworks, Inkscape, Illustrator, OmniGraffle, Photoshop & Visio. Printable sketch paper. CSS framework. The 960.css file is 3.6 KB. Repository at GitHub.

960 Grid System


Custom CSS generator

Grid overlay bookmark

Essence

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. Read more.

Dimensions

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. View demo.

Purpose

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.


MODx CMS — 12 col Show Grid12 Column Example

Subvert — 16 col Show Grid16 Column Example


Phil Coffman — 12 col Show Grid12 Column Example

Right From the Heart — 16 col Show Grid16 Column Example


Black Estate Vineyard — 12 col Show Grid12 Column Example

Onehub — 16 col Show Grid16 Column Example


A Better Office — 12 col Show Grid12 Column Example

WooThemes — 16 col Show Grid16 Column Example


Travis Isaacs — 12 col Show Grid12 Column Example

Tapbots • Weightbot — 16 col Show Grid16 Column Example


Church Mockup — 12 col Show Grid12 Column Example

Avalonstar — 16 col Show Grid16 Column Example


Code

View comprehensive code on the demo page.

To the right is an example of how the code works. The container specifies how many total columns exist, either 12 or 16. For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.

<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>

Nine-Sixty

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.

Credits

I drew inspiration from these individuals: Khoi Vinh, Cameron Moll, Olav Bjørkøy, Brandon Schauer, Jeff Croft and Mark Boulton. Their work spurred me to create my own. Special thanks to Eric Meyer for his comprehensive reset CSS.


Derivatives

The 960 Grid System is free to use, and may be repurposed to meet your specific needs. Several projects have already spun off, including versions that were built to be fluid and elastic. Additionally, it is has been adapted as a theme for Drupal.

Tutorials

Nettuts has a tutorial and video. WooThemes wrote a short post entitled “Why we love 960.gs” and use it as their framework for WordPress themes. For those who speak Spanish, Jepser Bernardino wrote a grid design overview en Español.

Feedback

I am always happy to hear how people are using the system, and would encourage any constructive criticism. Bear in mind, the whole spirit of this project is to be lightweight and focused solely on grids, but not to add bloat via extra features.


Follow me on Twitter Ads by Fusion