.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1

.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2


.column-sm-3 3
.column-sm-3 3
.column-sm-3 3
.column-sm-3 3

.column-sm-4 4
.column-sm-4 4
.column-sm-4 4

.column-sm-5 5
.column-sm-5 5
.column-sm-2 2

.column-sm-6 6
.column-sm-6 6

.column-sm-7 7
.column-sm-5 5

.column-sm-8 8
.column-sm-4 4

.column-sm-9 9
.column-sm-3 3

.column-sm-10 10
.column-sm-2 2

.column-sm-11 11
.column-sm-1 1

.column-sm-12 12

@mixin grid( $columns, $breakpoint ) {

  @for $i from 1 through $columns {
    .column-#{$breakpoint}-#{$i} {
      
      width: #{ ( 100 / $columns ) * ($i ) + '%'};
        
    }
  }

}

[class^='column-'] {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  text-align: center;
  width: 100%;
  float: left;
}

// Creates the grid for extra small devices
@include grid(12, xs);

// Creates the grid for small devices
@media (min-width: 768px) {
  @include grid(12, sm);
}

// Creates the grid for medium devices
@media (min-width: 992px) {
  @include grid(12, md);
}

// Creates the grid for large devices
@media (min-width: 1200px) {
  @include grid(12, lg);
}

*, :after, :before {
  box-sizing: border-box;
}