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?

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>

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;

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.

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;
    }