Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other

Question

The HTML scheme is following:

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.item CSS style:

float: left;

And the result:

But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.

Thank you

Covenanter

Answer 1

You can use CSS 3 column-width and column-gap like this..

http://www.bootply.com/118335

Expunge

Thanks Skelly. This is basically what I am currently using, but what bothers me is the fact that the newest items are displayed in the first column, not in the first row, which makes them not very visible for visitors. – Covenanter

Not possible without css3 or JavaScript. This would mean you would need to position your elements absolutely on the page every time. Doesn't really scale well :) – Xanthochroism

Answer 2

I run into the exact same problem and I found this one that worked for me.

https://github.com/kudago/waterfall

It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.

The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.

Hope this helps.

Gery