Building the grid

Using the same method we used for the  .one-third  and .two-thirds rules we can use a for loop and our bp mixin to create our four sets of classes. Each will go from 1 through 12 and will use the breakpoints we defined for small, medium, and large.

In scss/layout/_grid.scss, replace the .one-third and .two-thirds rules with the following:

@for $i from 1 through get($susy, columns) { 
    .col-#{$i} { 
        @include span($i); 
 
        &-last { 
            @include span($i last); 
        } 
    } 
} 

These nine lines of code are responsible for our mobile first set of column classes. This loops from one through 12 (which is currently the value of the $susy columns property) and creates a class for each. It also adds a class which handles removing the final columns right margin so our last column doesn't wrap onto a new line. Having control of when this happens will give us the most control. The preceding code would create...