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

user984621 picture user984621 · Mar 3, 2014 · Viewed 21.4k times · Source

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: enter image description here

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

Answer

Zim picture Zim · Mar 3, 2014

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

http://www.bootply.com/118335