JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jarallax.com/download/jarallax-min-0.2.js"></script>
<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

CSS

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {
width:100%;
}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}