A 12 column fluid grid for responsive designs.

grid-12col-fluid.css

/* 12 column fluid grid */

/* 
To use, simply drop the following classes into your markup. You can add 
borders and padding without worrying about breaking the layout. 
The first column in a row must always have the additional "first" class, which 
takes care of clearing the previous row and removing the left margin.
*/

.container {
  margin: 0 auto;
}

.container:before,
.container:after {
  content: " ";
  display: table;
}

.container:after {
  clear: both;
}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
  float: left;
  margin-left: 3.06748466257669%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid1 {
  width: 5.521472392638037%;
}
.grid2 {
  width: 14.11042944785276%;
}
.grid3 {
  width: 22.69938650306748%;
}
.grid4 {
  width: 31.28834355828221%;
}
.grid5 {
  width: 39.87730061349693%;
}
.grid6 {
  width: 48.46625766871166%;
}
.grid7 {
  width: 57.05521472392638%;
}
.grid8 {
  width: 65.6441717791411%;
}
.grid9 {
  width: 74.23312883435583%;
}
.grid10 {
  width: 82.82208588957055%;
}
.grid11 {
  width: 91.41104294478528%;
}
.grid12 {
  width: 100%;
  margin-left: 0;
  clear: left;
}
.first {
  margin-left: 0;
  clear: left;
}

.push1, .push2, .push3, .push4, .push5, .push6, .push7, .push8, .push9, .push10, .push11,
.pull1, .pull2, .pull3, .pull4, .pull5, .pull6, .pull7, .pull8, .pull9, .pull10, .pull11 {
  position: relative;
}

.push1 {
  left: 8.588957055214727%;
}
.push2 {
  left: 17.17791411042945%;
}
.push3 {
  left: 25.76687116564418%;
}
.push4 {
  left: 34.35582822085891%;
}
.push5 {
  left: 42.94478527607364%;
}
.push6 {
  left: 51.53374233128836%;
}
.push7 {
  left: 60.12269938650309%;
}
.push8 {
  left: 68.71165644171782%;
}
.push9 {
  left: 77.30061349693254%;
}
.push10 {
  left: 85.88957055214727%;
}
.push11 {
  left: 94.478527607362%;
}

.pull1 {
  left: -8.588957055214727%;
}
.pull2 {
  left: -17.17791411042945%;
}
.pull3 {
  left: -25.76687116564418%;
}
.pull4 {
  left: -34.35582822085891%;
}
.pull5 {
  left: -42.94478527607364%;
}
.pull6 {
  left: -51.53374233128836%;
}
.pull7 {
  left: -60.12269938650309%;
}
.pull8 {
  left: -68.71165644171782%;
}
.pull9 {
  left: -77.30061349693254%;
}
.pull10 {
  left: -85.88957055214727%;
}
.pull11 {
  left: -94.478527607362%;
}