Hello, I discovered this some time in css grid system that has helped me a lot in the projects.
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
