Less Grid mixin with fall back for < IE10

// Less Grid mixin with fall back for < IE10
//
// @grid-columns: 12;
// @grid-gutter: 2rem;
//
// .grid();
// .grid-item-xs();
// .grid-item-s();
// .grid-item-m();
// .grid-item-l();
// .grid-item-xl();
//

.grid(@gap: @grid-gutter) {
    .clearfix();

    margin-left: ~"calc(@{grid-gutter} / -2)";
    margin-right: ~"calc(@{grid-gutter} / -2)";

    @supports (display:grid) or (display:-ms-grid) {
        margin-left: 0;
        margin-right: 0;
        display: -ms-grid;
        display: grid;
        grid-gap: @gap;
        grid-template-columns: repeat(@grid-columns , minmax(0, 1fr));

        &:before,
        &:after {
            display: none;
        }
    }
}

.grid-item-xs(@span: @grid-columns) {
    float: left;
    width: calc(100% / (@grid-columns / @span));
    padding-left: ~"calc(@{grid-gutter} / 2)";
    padding-right: ~"calc(@{grid-gutter} / 2)";

    @supports (display:grid) or (display:-ms-grid) {
        float: none;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        grid-column-end: span @span;
    }
}

.grid-item-s(@span: 6) {
    @media (min-width: @screen-s) {
        width: calc(100% / (@grid-columns / @span));
    }

    @supports (display:grid) or (display:-ms-grid) {
        @media (min-width: @screen-s) {
            width: auto;
            grid-column-end: span @span;
        }
    }
}

.grid-item-m(@span: 4) {
    @media (min-width: @screen-m) {
        width: calc(100% / (@grid-columns / @span));
    }

    @supports (display:grid) or (display:-ms-grid) {
        @media (min-width: @screen-m) {
            width: auto;
            grid-column-end: span @span;
        }
    }
}

.grid-item-l(@span: 3) {
    @media (min-width: @screen-l) {
        width: calc(100% / (@grid-columns / @span));
    }

    @supports (display:grid) or (display:-ms-grid) {
        @media (min-width: @screen-l) {
            width: auto;
            grid-column-end: span @span;
        }
    }
}

.grid-item-xl(@span: 2) {
    @media (min-width: @screen-xl) {
        width: calc(100% / (@grid-columns / @span));
    }

    @supports (display:grid) or (display:-ms-grid) {
        @media (min-width: @screen-xl) {
            width: auto;
            grid-column-end: span @span;
        }
    }
}