2011-08-25 960 Gridder has been moved to github: github.com/peol/960gridder
Check me out on Twitter for web-tech related tweets and other fun stuff.

What is this?

960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites.

The idea came when designing a website for a student organization where I worked with several designers that handed their lay outs and designs in Photoshop format with a similar grid built-in to me. After a while I noticed how hard it became to make sure everything looked exactly how they intended it, especially in the different browsers.

960 Gridder is cross-browser compliant and works well in Internet Explorer 6/7/8, Firefox 2/3 and Chrome. Safari 4 Beta and Opera 9 is also working as expected and it should work in Safari 2.x-3.x also.

According to browsershots, all A-grade browsers now display the grid perfectly (version 1.3.1).

How does it work?

960 Gridder is built upon the very famous JavaScript framework jQuery. 960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it. However, 960 Gridder isn't affiliated with the jQuery authors at all.

It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.

By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).

Since version 1.3, you can now use shortcut commands to manipulate the grid. Use CTRL + ALT and Z for toggling gutters, X for toggling paragraphs and C for toggling both. Use A to toggle invertion of the grid.

You can see and read about the "960 standard" at http://960.gs.

Where do I use it?

960 Gridder is mainly developed with focus on initial lay out or fine tuning of a website. Therefore, to be really effective it should be integrated into your lay out. If you however are curious about how different websites did their layout, you can use the bookmarklet.

You can try the bookmarklet for example at Facebook, flickr or why don't you just check out one of my favorite websites, elementiks awesome list of web tools and resources? (Almost) all good things are 960 pixels in width! :-) For the swedish visitors, why not try it out on the feber.se sites? For a quick example, just click on this link: 960 Gridder!

To "remove" the grid, once activated, use CTRL + ALT + C or just refresh the page.


The development version is heavily worked on from time to time, which makes it pretty unstable. If you are thinking about implementing 960 Gridder, you are better of with the stable releases. This is however the version you would want to try if you want to see new functionality that is being implemented.

The 960 Gridder (dev) version is also available as a bookmarklet, just drag the link to your bookmark field in your browser.

Source code, development version and older versions can be found here.

Known Problems

If you find anything that annoy you or something you want or need, just drop me a line on the e-mail address in the footer (click on my name) or drop me a line in the comments area below.

Latest Release

Version 1.3.1 released April 26th, 2009.

Changelog (parsed from source code)


To easily use 960 Gridder on various websites, you can use the bookmarklet below. Click and drag this link: 960 Gridder to your bookmark field in your browser.


Below is an example on how to override the default values. You insert this snippet into your HEAD tag and you are good to go.

Note! You can leave out any variables you wish to have default values.

<script type="text/javascript">
var gOverride = {
  urlBase: 'http://gridder.andreehansson.se/releases/latest/',
  gColor: '#EEEEEE',
  gColumns: 12,
  gOpacity: 0.35,
  gWidth: 10,
  pColor: '#C0C0C0',
  pHeight: 15,
  pOffset: 0,
  pOpacity: 0.55,
  center: true,
  gEnabled: true,
  pEnabled: true,
  setupEnabled: true,
  fixFlash: true,
  size: 960


When you are heavily developing a site, you probably don't want to activate 960 Gridder by clicking on the bookmarklet every time, in that case, use the code below to automatically enable the grid on your website.

<script type="text/javascript">
// Insert optional override object before the function

createGridder = function() {
<body onload="createGridder()">

A live example of this can be viewed here, it is always running the latest version.

Other Stuff

If you want to see other stuff I have been working on, check out my GitHub, http://github.com/peol , which includes a jQuery Text Selection special event plugin and a computed style (CSS) plugin.

Authored by Andrée Hansson, this project is licensed under a MIT License, some rights reserved.
Read more at http://www.opensource.org/licenses/mit-license.php