result of grid.scss

grid.css

/*Result*/
.col-1 {
  float: left;
  margin-right: 1%;
  width: 7.3333333333%; 
}

.col-2 {
  float: left;
  margin-right: 1%;
  width: 15.6666666667%; 
}

.col-3 {
  float: left;
  margin-right: 1%;
  width: 24%; 
}

.col-4 {
  float: left;
  margin-right: 1%;
  width: 32.3333333333%; 
}

.col-5 {
  float: left;
  margin-right: 1%;
  width: 40.6666666667%; 
}

.col-6 {
  float: left;
  margin-right: 1%;
  width: 49%; 
}

.col-7 {
  float: left;
  margin-right: 1%;
  width: 57.3333333333%; 
}

.col-8 {
  float: left;
  margin-right: 1%;
  width: 65.6666666667%; 
}

.col-9 {
  float: left;
  margin-right: 1%;
  width: 74%; 
}

.col-10 {
  float: left;
  margin-right: 1%;
  width: 82.3333333333%; 
}

.col-11 {
  float: left;
  margin-right: 1%;
  width: 90.6666666667%; 
}

.col-12 {
  float: left;
  margin-right: 1%;
  width: 99%; 
}

//Breakpoints for col-1
@media screen and (max-width: 575px) {
  .col-xs-1 {
    float: left;
    margin-right: 1%;
    width: 7.3333333333% !important;
  }
}

@media screen and (min-width: 576px) {
  .col-sm-1 {
    float: left;
    margin-right: 1%;
    width: 7.3333333333% !important; 
  } 
}

@media screen and (min-width: 768px) {
  .col-md-1 {
    float: left;
    margin-right: 1%;
    width: 7.3333333333% !important; 
  } 
}

@media screen and (min-width: 992px) {
  .col-lg-1 {
    float: left;
    margin-right: 1%;
    width: 7.3333333333% !important; 
  } 
}

@media screen and (min-width: 1200px) {
  .col-xl-1 {
    float: left;
    margin-right: 1%;
    width: 7.3333333333% !important; 
  } 
}