SCSS | Responsive css tiling layout for fixed width spacing and variable width columns

tiling_grid_structure.scss

@mixin colcalc($spacing, $columns) {
    // First let us reset any previous margins and clears
    // As 2 columns is the first use there's no need to reset, so we make it conditional
    @if $columns > 2 {
        $previous_columns: $columns - 1;
        &:nth-child(#{$previous_columns}n) {
            margin-right: $spacing;
        }
        &:nth-child(#{$previous_columns}n+1) {
            clear: none;
        }
    }
    // Now for the width calculation
    $total_spacing: ( $columns - 1 ) * $spacing;
    width: -moz-calc( ( 100% - #{$total_spacing} ) / #{$columns} );
    width: -webkit-calc( ( 100% - #{$total_spacing} ) / #{$columns} );
    width: calc( ( 100% - #{$total_spacing} ) / #{$columns} );
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        width: calc( ( 100% - #{$total_spacing} - 1px ) / #{$columns} );
    }
    @supports (-ms-ime-align: auto) {
        width: calc( ( 100% - #{$total_spacing} - 1px ) / #{$columns} );
    }    
    &:nth-child(#{$columns}n){
        margin-right: 0;
    }
    &:nth-child(#{$columns}n+1){
        clear: left;
    }
}

Must update this to be the fallback for CSS grid. It's on my to-do list, please don't hurt me.

This verbose gist should now die. Grid is supported widely, use this gist instead.