The Beauty and Simplicity of the 960 Grid

One of the most useful tools I have found on the web is the 960 grid. While most developers will shy away from using this type of a CSS framework, but I embrace it. While there are times that I will be building something that doesn’t exactly fit into this framework, the majority of jobs will. The 960 grid is a sure way to produce a solid structured website that will read well in all browsers.

The grid generator and download can be found at 960.gs which intself is a huge asset, as it allows you to preview what the final grid will look like. Not to mention they have now added a “Website builder” which will not only generate the CSS for you but also the HTML saving tons of time and effort. Since I like to think of this blog as a learning tool developed by a self taught student, I’ve decided to ouline the basics of 960 grid system.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// This is your Wrapper
<div class="container_12">
 
	//12 column div
	<div class="grid_12">
	//Content goes here
	</div>
		// Goto the next line
		<div class="clear"></div>
 
	// Left area, 4 columns wide
	<div class="grid_4">
		//Content goes here
	</div>
 
	// Right area, 8 columns wide
	<div class="grid_8">
		//Content goes here
	</div>
 
</div> // Closes you Wrapper

The Design of the 960 Grid is so simple, and there are so many tools offered on their site there is no wonder that so many people are using it. Take a look at their website and a list of the websites using the grid, including companies like drupal. www.960.gs