How to create masonry effects using only bootstrap 3 and css

Question

My problem is that I want to display the data in block format using the bootstrap 3 system grid, however I do not want to annoy the spaces in the spaces that occur due to the height being limited by the specified string. 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 remain with a space between the two lines, what I'm trying to achieve is the effect of Freemasonry (where the post-filling sits next to the inscription above it) using only CSS, in particular, the bootstrap 3 system grid. That is:

I know this can be done with plugins , but I want to see if theres a cleaner (even if it should be a hacker) solution, Any ideas?

Answer 1

We did this on the site, and we made 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 the Bootstap element .row .row used to clear the floats of the div blocks / col it contains (in your ex. col-lg-4 );

Thus, in principle, it is impossible for elements in different lines to stand next to each other, you definitely need to change the markup;

On the other hand, using a bootstrap-responsive column system can be useful for creating CSS Freemasonry effects:
you can try to place all the "col-items" that you want to make the masonry effect on the inside of one line , displaying as an inline block (plus, perhaps, some other minor adjustments ..) should do the trick (this is the way if you are only stuck with CSS ..);

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

a thousand thanks to Desandro for this amazing idea;

Answer 3

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

Although I would recommend using isotope , since JS offers more control and better compatibility than CSS.

Answer 4

I made a simple masonry grid that gets images from a DB, 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; }