Tutorials and Inspiration to Unleash the 960 Grid System

Do you have problems in coding your own design? Does it have to do with styling and CSS? Do you want to speed things up and not make a mess of it? If you too have the previous questions and problems, Nathan Smith has created a system known as the 960 Grid System to answer your questions.

The 960 Grid System is a CSS grid system for rapid prototyping and development of websites.  In easy and brief terms, the 960 Grid System helps ease up the coding process, minimizing errors and maximizing efficiency. The grid system is a mechanism that breaks up the work into shorter pieces so accuracy is achieved.

In this hybrid article, we’ll dive into the 960 grid system with a quick overview, then we’ll give you some great tutorials and finally some inspiration to get you started.

What is 960gs?

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.

This system works for almost any browser and any OS. If any problems do come they are easy to fix out. It is free to use and these days with its increasing popularity one can easily find tutorials on using this incredible framework.

One drawback could be that it can only work for layouts with a 960px width.  So if one has a different layout choosing this framework could be tedious.

If you are on the hunt for resources regarding on how to design your site according to this framework, this .zip file file will help you. Also, if you are concerned if developers using this framework have not so good looking sites that the 960 grid system website has a few mind blowing examples one could refer to before using this framework, and we’ve included a few of the inspirational sites below.

If you are having any problems or confusions on what framework to choose, Raj Dash has written a good and detailed article at Net.tutsplus to remove such confusions, titled “Which CSS Grid Framework Should You Use for Web Design?

Tutorials and Resources for using 960gs

960 CSS Framework: Learn the Basics:

960 500x308

960 CSS Framework: Learn the Basics

Prototyping with the 960gs:

final 499x520

Prototyping with the 960 Grid CSS Framework

Build a Newspaper Website with a Grid (NETTUTS Plus Tutorial)

final 500x631

Build a Newspaper Website with a Grid (NETTUTS Plus Tutorial)

Design a Fresh Blog Website Based on the 960 Grid System:

fresh 500x217

Design a Fresh Blog Website Based on the 960 Grid System

Introduction Design Tutorial for 960 GS:

5 finishedsite 500x286

Introduction Design Tutorial for the 960 GS

Build a WordPress Theme with the 960 GS:

single 500x286

Build a WordPress Theme with the 960 GS

Inspirational Websites using 960gs

example woothemes


intersport 1

Nuvo Graphics

example onehub


example phil

Phil Coffman

example pulseapp

Pulse App

example vineyard

Black Estate Vineyard

example rightfrom

Right From The Heart

example travis

Travis Isaacs

4 Responses to “Tutorials and Inspiration to Unleash the 960 Grid System”
  1. n April 7, 2010
  2. Schrumpfschläuche April 7, 2010
    • Eric Shafer April 7, 2010
    • Sam April 8, 2010

Leave a Reply

Your email address will not be published. Required fields are marked *