grid.less

.row {
    width: 100%;
    .add-display-table;
}

.column {
    min-height: 1px; 
    display: table-cell;
    box-sizing: border-box;
}

// Columns scaffolding
.create-cols () {
    // Common styles for all sizes of grid columns, widths 1-12
    .iterate(@index) when (@index = 1) { // initial
        @item: ~".column--@{index}, .column--small-@{index}, .column--medium-@{index}, .column--large-@{index}, .column--xlarge-@{index}";
        .iterate(@index, @item);
    }

    .iterate(@index, @list) when (@index =< 12) { // general; "=<" isn't a typo
        @item: ~".column--@{index}, .column--small-@{index}, .column--medium-@{index}, .column--large-@{index}, .column--xlarge-@{index}";
        .iterate(@index + 1, ~"@{list}, @{item}");
        @{item} {
            width: percentage((@index / 12));
        }
    }

    .iterate(1); // kickstart it
}

// Making grid responsive 
.make-responsive (@class) {
    .responsive-sugar () {
        width: 100%;
        display: block;
        height: auto !important;
        display: block;
    }

    // Common styles for all sizes of grid columns, widths 1-12
    .iterate(@index, @list: ".column--@{class}-@{index}") when (@index <= 12) { // initial
        .iterate(@index + 1, ~"@{list}, .column--@{class}-@{index}");
    }

    .iterate(@index, @list) when (@index > 12) { 
        @{list} when (@class = small) {
                @media (max-width: @screen-s) {
                    .responsive-sugar();
                }
        }
        @{list} when (@class = medium) {
                @media (max-width: @screen-m) {
                    .responsive-sugar();
                }
        }
        @{list} when (@class = large) {
                @media (max-width: @screen-l) {
                    .responsive-sugar();
                }
        }
        @{list} when (@class = xlarge) {
                @media (max-width: @screen-xl) {
                    .responsive-sugar();
                }
        }
    }

    .iterate(1); // kickstart it
}

.create-cols();
.make-responsive(small);
.make-responsive(medium);
.make-responsive(large);
.make-responsive(xlarge);