How to create the masonry effects with just bootstrap 3 grid system and css

Question

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height being constrained to the above row. For example, If i do:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

then i will be left with whitespace between the two rows, what i am trying to achieve is a masonry effect (where a post fill sit near the post above it) with only using CSS, Specifically the bootstrap 3 grid system. I.E:

I know this can be done with plugins but i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?

Rake

sickdesigner.com/masonry-css-getting-awesome-with-css3 – Slotnick

The way that Aibrean suggests and the link above puts the boxes in column order, not box order, and Masonry puts them wherever they fit, and it's not in order but it's sometimes close. – Slotnick

@BootstrapBoogie-Christina I liked that link however it doesn't really use the bootstrap 3 grid system, i put together a fiddle: jsfiddle.net/vtanz6xc/2 that does however and uses the column system still, i suppose this will have to work for now. – Rake

Answer 1

We did this on a site, and what we did was put the grid in vertical rows.

Example:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>

Epicardium

What do you mean by "put the grid in vertical rows." bootstrap doesn't seem to have a box class, just a taf confused – Rake

It is an example, no need to take box literally. The "vertical rows" is columns, except I didn't want you to think of actually using columns. The way you are thinking of doing it is across, when it should be flowing down and up. You'll definitely need to use Javascript for the ordering. We had ours set up with the bootstrap grid class on an LI. – Epicardium

Yep, that's right :) The JS would have to fire so the ordering is across. Every second integer goes in the second column, every third in the third, etc. – Epicardium

Okay, this is how i will do it for now, I'll sit down tonight and try to come up with a better solution to lay the columns inline, thanks! – Rake

Sounds like a good idea. How do I set up JS to redistribute the boxes when the fluid layout changes? I'll have to dynamically put them into one of the cols depending on the display being xs, sm, md or lg. – Tortricid

This is a naive approach to the problem. I mean that in the literal sense in that it falls over when you have your first column full of really tall divs, and it is huge compared to the two next to it. That's not masonry style, that's just columns. – Golf

Answer 2

In Bootstap .row element is used for clearing floats of the div-blocks / col it contains (in your ex. col-lg-4);

So it's basically impossible to have elements in different rows stand next to each other, you necessarily need to change the markup;

On the other hand using bootstrap responsive column system could be helpful for making a CSS-Masonry effect:
you can try placing all "col-items" that you want to make the masonry effect on inside one row, displaying as inline-block(plus maybe some other little adjustments ..) should do the trick (this is the way to go for if you're stuck only with CSS..);

In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS I suggest you to use JS .

a thousand thanks to Desandro for this awesome idea;

Nonconcurrence

Answer 3

In Bootstrap 4 you can use .card-columns, see here: https://v4-alpha.getbootstrap.com/components/card/

Though I would recommend using isotope as JS offers more control and better compatibility than CSS.

Monitory

Answer 4

i did a simple masonry grid that receive images from DB , by just css like this :

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }

Bethought

Answer 5

Unless you can use Bootstrap 4+ card columns you'd need some kind of a masonry layout JavaScript library. DeSandro has a library named Isotope, or check out this Masonry (https://masonry.desandro.com/) solution.

<div class="row my-container">
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">longer post that is going to take more height than the others</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
</div>

and JavaScript:

$(document).ready(function() {
  var $container = $('.my-container');

  $container.masonry({
    itemSelector: '.my-card',
    columnWidth: '.my-card',
    transitionDuration: 0
  });
});

Dishwasher