grid_of_four.css

/* Customized Responsive Grid System  OF 4 columns 
/* Customized from http://www.responsivegridsystem.com/

   You can use this grid to add any number of elements to 
   the grid, and this will automatically scale down from 4 
   to 3, then 2 and lastly 1 column depending on the device

  usage:
     .grid .grid_of_4 for the grid container.
     .col .cell for each cell in the grid.
  
  example:

    <div class="grid grid_of_4">
      <div class="col cell">Cell 1</div>
      <div class="col cell">Cell 2</div>
      <div class="col cell">Cell 3</div>
      <div class="col cell">Cell 4</div>
    </div>
  
   feel free to get the code and modify the breakpoints if you wish
*/


.grid {
  clear: both;
  padding: 0;
  margin: 0;
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.grid:before,
.grid:after {
  content:"";
  display:table;
}
.grid:after {
  clear:both;
}
/*  GRID COLUMN SETUP ============== */
.col {
  display: block;
  float:left;
  margin: 0 0 1.6% 1.6%;
}
/*  GRID OF FOUR AT 1025px OR MORE  ================= */
.grid_of_4 > .cell {
  width: 23.8%;
}
@media only screen and (min-width: 1025px) {
  .grid_of_4 > .col:nth-child(4n+1) { margin-left: 0; clear: left;}
}
/*  GRID OF THREE BETWEEN 601px and 1024px*/
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .grid_of_4 > .cell { width: 32.26%;}
  .grid_of_4 > .col:nth-child(3n+1) { margin-left: 0; clear: left;}
}
/*  GRID OF TWO BETWEEN 481px AND 600px */
@media only screen and (min-width: 481px) and (max-width: 600px) {
  .grid_of_4 > .col:nth-child(2n+1) { margin-left: 0; clear: left; }
  .grid_of_4 > .cell { width: 49.2%; }
}

/*  GRID OF ONE AT 480 PIXELS OR LESS */
@media only screen and (max-width: 480px) {
  .grid_of_4 > .col { margin-left: 0; margin-bottom: 1em; clear: left; }
  .grid_of_4 > .cell { width: 100%; }
}