You can use CSS 3 column-width
and column-gap
like this..
Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other
-
19-10-2022 - |
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
No correct solution
OTHER TIPS
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.