Home Paper Wireframes 960 Grid system Wireframes

0 8015

The 960-grid system is designed to make website in grids.

Download the wireframes

What is it exactly?

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 they worked with several designers that handed their lay outs and designs in Photoshop format with a similar grid built-in. After a while they 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. UseA 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 Facebookflickr or why don’t you just check out one of their favorite websites,elementiks awesome list of web tools and resources? (Almost) all good things are 960 pixels in width!

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.

You can find everything about the 960 system here!

Go to the 960 Grid system!
Review overview
Client Related


Leave a Reply