Super simple grid system

_grid.scss

.container{
      width: 100%; 
      max-width: 1200px;      
      margin: 0 auto;
  }

  /*-- our cleafix hack -- */ 
  .row:before, 
  .row:after {
      content:"";
      display: table ;
      clear:both;
  }

  [class*='col-'] {
      float: left; 
      min-height: 1px; 
      width: 16.66%; 
      /*-- our gutter -- */
      padding: 12px; 
      background-color: #FFDCDC;
  }

  .col-1{ width: 16.66%; }
  .col-2{ width: 33.33%; }
  .col-3{ width: 50%;    }
  .col-4{ width: 66.66%; }
  .col-5{ width: 83.33%; }
  .col-6{ width: 100%;   }

  .outline, .outline *{
      outline: 1px solid #F6A1A1; 
  }

  /*-- some extra column content styling --*/
  [class*='col-'] > p {
   background-color: #FFC2C2; 
   padding: 0;
   margin: 0;
   text-align: center; 
   color: white; 
  }

  @media all and (max-width:800px){
      .col-1{ width: 33.33%;  }
      .col-2{ width: 50%;     }
      .col-3{ width: 83.33%;  }
      .col-4{ width: 100%;    }
      .col-5{ width: 100%;    }
      .col-6{ width: 100%;    }

      .row .col-2:last-of-type{
          width: 100%; 
      }

      .row .col-5 ~ .col-1{
          width: 100%; 
      }
  }

  @media all and (max-width:650px){
      .col-1{ width: 50%;     }
      .col-2{ width: 100%;    }
      .col-3{ width: 100%;    }
      .col-4{ width: 100%;    }
      .col-5{ width: 100%;    }
      .col-6{ width: 100%;    }
  }