Bootstrap row elements with variable height

Question

I'm currently developing a website using Twitter Bootstrap.

My case: A single .row element containing several elements .col-XX-XX with variable height (product images with variable image ratio)

The number of columns in my design vary from viewport size to viewport-size, which disables me just seperate the elements by use of creating several .row wrappers.

Each element having variable height, due to the element's individual image. Large blank areas (marked with red) with no elements can appear if a large element is appearing as first in the actual row it is appearing.

My only solution yet is to set a predefined height of the elements in the list, to ensure that no "jumping" can happen when the next element (on a new row) is displayed.

I've also tried to use a javascript, finding the max value of the elements, and then set all elements to this height, however this is a bad solution hence large varity of image heights will also create large blank areas.

Does anyone have a nice solution to this problem?

Answer 1

With help from Joseph Casey, I found a solution.

CSS: flexbox

By using the styles explained in this link: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

I used the following styles:

CSS

.row{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row .item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Which achieved that the elements aligns nicely.

The styles is supported by the most newer browsers. I found a list of the browser support of flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A little note: In Google Chrome 43, the first row of elements moves the last element down on the next row (last column on first row is empty), but on all following rows, all columns is filled nicely. I haven't found any solution to this yet.