Grid Column Clearing

Created by: sixfootsixdesigns

When creating a grid that contains a bunch of columns of varying heights, the columns don't clear when reaching 12 per row.

For Example:

<div class="row">
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2" style="height:200px;"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
    <div class="col-6 col-sm-4 col-lg-2"></div>
</div>

In this case the second row of columns doesn't clear the first row.

Here is a possible solution that i'm using : Add a class name of multi-columns-row to to the row.

    <div class="row multi-columns-row">...</div>

And then add the following LESS to the grid.less file.

// for IE < 9
.first-in-row {
    clear: left;
}
// clear the first in row for any block that has the class "multi-columns-row"
.multi-columns-row .col-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-1:nth-child(12n + 13) { clear: left; }
@media (min-width: @screen-tablet) {
    // reset previous grid
    .multi-columns-row .col-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-1:nth-child(12n + 13) { clear: none; }

    // clear first in row for small columns
    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: @screen-desktop) {
    // reset previous grid
    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; }

    // clear first in row for large columns
    .multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }
}

This works in modern browsers but not in IE < 9. So here is a jquery fix for that which would go in a file at the end of the document.

jQuery(document).ready(function($) {
    var resizeTimer = null, $doc = $(document);
    function rowPolyfill() {
        var w = $doc.width();
        jQuery('.multi-columns-row > [class^="col-"]').removeClass('first-in-row');
        if (w > 921) {
            jQuery('.multi-columns-row > .col-lg-6:nth-child(2n + 3)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-lg-4:nth-child(3n + 4)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-lg-3:nth-child(4n + 5)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-lg-2:nth-child(6n + 7)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-lg-1:nth-child(12n + 13)').addClass('first-in-row');
        } else if (w > 767) {
            jQuery('.multi-columns-row > .col-sm-6:nth-child(2n + 3)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-sm-4:nth-child(3n + 4)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-sm-3:nth-child(4n + 5)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-sm-2:nth-child(6n + 7)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-sm-1:nth-child(12n + 13)').addClass('first-in-row');
        } else {
            jQuery('.multi-columns-row > .col-6:nth-child(2n + 3)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-4:nth-child(3n + 4)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-3:nth-child(4n + 5)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-2:nth-child(6n + 7)').addClass('first-in-row');
            jQuery('.multi-columns-row > .col-1:nth-child(12n + 13)').addClass('first-in-row');
        }
    }   
    rowPolyfill();

    $(window).on('resize', function() {
        if (resizeTimer !== null) {
        clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(rowPolyfill, 400);
    });
});

This might not be the best solution but it is working for me at the moment until an actual solution comes about.