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.