title: How to create the masonry effects with just bootstrap 3 grid system and css
body: <p>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:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-4"&gt;post&lt;/div&gt;
      &lt;div class="col-lg-4"&gt;longer post that is going to take more height than the others&lt;/div&gt;
      &lt;div class="col-lg-4"&gt;post&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-4"&gt;post&lt;/div&gt;
      &lt;div class="col-lg-4"&gt;post&lt;/div&gt;
      &lt;div class="col-lg-4"&gt;post&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/5it2N.jpg" alt="enter image description here"></p>
  
  <p>I know this can be done with <a href="https://github.com/desandro/masonry" rel="noreferrer">plugins</a> but i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?</p>