A simple grid that will help you also in all the projects that can dynamically display columns
without breaking the layout and always keeping the same pattern.

Below, I will show how simple it is to use this grid system.

The result using values ??above this will be clear that the scale of the site, 960px and 940 total area used.

Now the css generated the grid will look like.
 The css generated by grid 1

body{min-width:960px;}
.container_3{margin-left:auto;margin-right:auto;width:960px;}
.grid_1,.grid_2,.grid_3{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px;}
.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3{position:relative;}
.alpha{margin-left:0;}
.omega{margin-right:0;}
.container_3 .grid_1{width:300px;}
.container_3 .grid_2{width:620px;}
.container_3 .grid_3{width:940px;}
.container_3 .prefix_1{padding-left:320px;}
.container_3 .prefix_2{padding-left:640px;}
.container_3 .suffix_1{padding-right:320px;}
.container_3 .suffix_2{padding-right:640px;}
.container_3 .push_1{left:320px;}
.container_3 .push_2{left:640px;}
.container_3 .pull_1{left:-320px;}
.container_3 .pull_2{left:-640px;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:before,.clearfix:after{content:'\0020';display:block;
overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

In the case of a site that will use all the useful area of the monitor had been so.

The css generated by grid 2 ‘fluid’

.container_3{width:92%;margin-left:4%;margin-right:4%;}
.grid_1,.grid_2,.grid_3{display:inline;float:left;position:relative;margin-left:1%;margin-right:1%;}
.alpha{margin-left:0;}
.omega{margin-right:0;}
.container_3 .grid_1{width:31.333%;}
.container_3 .grid_2{width:64.667%;}
.container_3 .grid_3{width:98%;}
.container_3 .prefix_1{padding-left:33.333%;}
.container_3 .prefix_2{padding-left:66.667%;}
.container_3 .suffix_1{padding-right:33.333%;}
.container_3 .suffix_2{padding-right:66.667%;}
.container_3 .push_1{left:33.333%;}
.container_3 .push_2{left:66.667%;}
.container_3 .pull_1{left:-33.333%;}
.container_3 .pull_2{left:-66.667%;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;
visibility:hidden;width:0;height:0;}
.clearfix{display:block;}
* html .clearfix{height:1%;}

960grid | Custom css Grid | Example 1 | Example 2

Examples of sites using grid system.

Highlight grid

Highlight grid

More examples in 960.gs

[fblikebutton]

Some time ago, I worked in an agency that has developed a giant touchscreen panel for a client, took about three months to develop, when I read the documentation, I said, I can do this with jquery, and not using flash , as the developer was a major flash-known owner of the agency, he decided to do in flash, well, were the nights of sleep lost to development, occurred at the end almost everything right, finally.

I left that agency, and decided to develop the same project using jquery, of course not had the patience to develop 100%, just wanted to show what was possible, did the main part of the project that was user interaction with the virtual beach. As you can see in the example below.

I will still finish the entire project, but that is for a next time.

The project in flash was really good, but wanted to show that there are other possibilities.

And congratulations to the agency for this great achievement.

[fblikebutton]

This was a wedding gift from a friend of mine.

[fblikebutton]