JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <input type="hidden" name="hfTotalGridItems" id="hfTotalGridItems" value="10" />
    <div class="grid">
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
        <div class="item">
            <div>lorem</div>
        </div>
    </div>
    <div class="result"></div>

CSS

.grid {
        margin: 0 auto;
    }
    .item {
        margin-bottom: 20px;
        border: 1px solid red;
        height: 80px;
        width: 80px;        
    }
    .filler {
        background-color: #999;
        border: 1px solid blue;
    }

JavaScript

$(function () {

        // remember the original box lenth. 
        var $item = $('.grid .item');
        var originalBoxs = $item.length;

        function calculateRows() {

            var lisInRow = 0;
            var $item = $('.grid .item');
            var $grid = $('.grid');
            var itemWidth = $('.grid .item').width();
            var itemHeight = $('.grid .item').height();

            // calculate how many boxes are in the first row. 
            $item.each(function () {
                if ($(this).prev().length > 0) {
                    if ($(this).position().top != $(this).prev().position().top) return false;
                    lisInRow++;
                } else {
                    lisInRow++;
                }
            });

            // calculate how many boxes are in the last row. 
            var lisInLastRow = $item.length % lisInRow;

            $('.result').html('No: of lis in a row = ' + lisInRow + '<br>' + 'No: of lis in last row = ' + lisInLastRow);

            // the total allowed boxes on the page. 
            var totalAllowed = lisInRow;
            while (totalAllowed < originalBoxs) {
                totalAllowed += lisInRow;
            }

            if (($item.length > originalBoxs && originalBoxs % lisInRow === 0) || ($item.length > totalAllowed)) {
                // if the number of original boxes evenly divides into the number of boxes in a row.
                // or the number of boxes on the page is past the max allowed. 
                // remove any filler boxes. 
                var boxesToDelete = $('.grid .item.filler');
                var deleteBoxes = $item.length - totalAllowed;
                for (var i = 0; i < deleteBoxes; i++) {
                    // delete unnesecary boxes. 
                    $grid.masonry('remove', boxesToDelete[boxesToDelete.length - i - 1]);
                }
            } else if (lisInLastRow !== 0) {
                // if the last row does not equal 0 and the number...