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 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.