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;
    }
}

Well, I've finally had chance to test this properly in IE and Edge, and both browsers struggled with rounding numbers when divided by 3. So I've found IE and Edge specific queries which deduct 1 pixel off the width and this has resolved the issue. All is now good.

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.