Responsive product grid bootstrap for 4-way, 3way and 2-way

[okid]

Hi,

Im making a product grid something like:

https://danielladraper.com/shop/all/

so Im using <div class="col-md-3 col-sm-4 col-xs-6 product">

This works great while the columns are all the same height, but obviously fails when they aren’t.

Looking at the bootstrap docs they talk about adding empty divs just with clearfixes to resolve this, doesn seem like a particulky nice way to do it and as my grid goes down from 4 way, to 3way to 2 way it would take alot of divs.

Is there a more robust way of doing this?

I was planning on just writing some custom CSS using media queries to clear the floats at n3+n, n2+n and so on. But surely this will be duplicating something already in bootstrap 3? this must be a common issue

[PaulOB]

@okid

Is there a more robust way of doing this?

Yes, come out of the grid and use inline-block instead of float. In that way there will be nothing to clear and lines will always wrap nicely. The bootstrap floated model is a pain to do this sort of thing which is so easy in basic css.