grid.css

.container {
   margin-right: -10px;
  margin-left: -10px;
 
}

.container:after {
    content: '';
    display:block;
    clear:both;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 980px) {
  .container {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}



 .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
	padding-right: 10px;
	padding-left: 10px;
	box-sizing:border-box;
  }
  .col12 {
    width: 100%;
  }
  .col11 {
    width: 91.66666667%;
  }
  .col10 {
    width: 83.33333333%;
  }
  .col9 {
    width: 75%;
  }
  .col8 {
    width: 66.66666667%;
  }
  .col7 {
    width: 58.33333333%;
  }
  .col6 {
    width: 50%;
  }
  .col5 {
    width: 41.66666667%;
  }
  .col4 {
    width: 33.33333333%;
  }
  .col3 {
    width: 25%;
  }
  .col2 {
    width: 16.66666667%;
  }
  .col1 {
    width: 8.33333333%;
  }

 @media (max-width: 480px) {
  .container {
    width: 100%;
  }
 .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
   display: block;
   width: 100%;
	
  }
  }