JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<body>
    <div class="container">
        <div id="pin-outer">
            <div class="col-lg-4 pin pin-inner"> <a href="/">
                       <img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
                           
                        <p class="post-title">Title One</p>
                        <p class="post-snippet">
                            This is a post about title one. 
                        </p>
                    </a>

            </div>
            <div class="col-lg-4 pin pin-inner"> <a href="/">
                       <img src="http://www.placehold.it/300x400&text=TWO" class="img-responsive">
                           
                        <p class="post-title">Title TWO</p>
                        <p class="post-snippet">
                            This is a post about title two. 
                        </p>
                    </a>

            </div>
            <div class="col-lg-4 pin pin-inner"> <a href="/">
                       <img src="http://www.placehold.it/300x400&text=THREE" class="img-responsive">
                           
                        <p class="post-title">Title three</p>
                        <p class="post-snippet">
                            This is a post about title three. 
                        </p>
                    </a>

            </div>
            <div class="col-lg-4 pin pin-inner"> <a href="/">
                       <img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
                           
                        <p class="post-title">Title Four</p>
                        <p class="post-snippet">
                      ...

CSS

.pin {
    margin: 0 0 50px;
    text-align: left;
    width: 330px;
}
.pin img {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.pin p {
    font-size : 12px;
    color: #333;
    margin: 0;
    text-decoration: none;
}
.pin:hover {
    opacity: 0.4;
    text-decoration: none;
}

JavaScript

// Load is used to ensure all images have been loaded, impossible with document
//https://gist.github.com/justincarroll/5959773
// Load is used to ensure all images have been loaded, impossible with document

jQuery(window).load(function () {



    // Takes the gutter width from the bottom margin of .pin-inner

    var gutter = parseInt(jQuery('.pin-inner').css('marginBottom'));
    var container = jQuery('#pin-outer');



    // Creates an instance of Masonry on #pin-outer

    container.masonry({
        gutter: gutter,
        itemSelector: '.pin-inner',
        columnWidth: '.pin-inner'
    });



    // This code fires every time a user resizes the screen and only affects .pin-inner elements
    // whose parent class is .container-fluid. Triggers resize so nothing looks weird.

    jQuery(window).bind('resize', function () {
        if (jQuery('#pin-outer').parent().hasClass('container-fluid')) {



            // Resets all widths to 'auto' to sterilize calculations

            post_width = jQuery('.pin-inner').width() + gutter;
            jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', 'auto');



            // Calculates how many .pin-inner elements will actually fit per row. Could this code be cleaner?

            pin - outer_per_row = jQuery('#pin-outer').innerWidth() / post_width;
            floor_pin - outer_width = (Math.floor(pin - outer_per_row) * post_width) - gutter;
            ceil_pin - outer_width = (Math.ceil(pin - outer_per_row) * post_width) - gutter;
            pin - outer_width = (ceil_pin - outer_width > jQuery('#pin-outer').innerWidth()) ? floor_pin - outer_width : ceil_pin - outer_width;
            if (pin - outer_width == jQuery('.pin-inner').width()) pin - outer_width = '100%';



            // Ensures that all top-level .container-fluid elements have equal width and stay centered

            jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', pin - outer_width);
        ...