JSFiddle - React, Tailwind, and code Playground

HTML

<h2>リスト5個</h2>
<ul class="grids balancer">
  <li>
    <h4>リスト1</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト2</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト3</h4>
    <p><img src="http://placehold.it/350x150" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト4</h4>
    <p><img src="http://placehold.it/350x150" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
        <li>
    <h4>リスト5</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
</ul>
                 <h2>リスト5個 layout-balancer不使用</h2>
<ul class="grids">
  <li>
    <h4>リスト1</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト2</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト3</h4>
    <p><img src="http://placehold.it/350x150" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト4</h4>
    <p><img src="http://placehold.it/350x150" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
        <li>
    <h4>リスト5</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
</ul>
      <h2>リスト4個</h2>
<ul class="grids balancer">
  <li>
    <h4>リスト1</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト2</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
    <h4>リスト3</h4>
    <p><img src="http://placehold.it/350x150" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>

        <li>
    <h4>リスト4</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
</ul>
      
            <h2>リスト6個</h2>
<ul class="grids balancer">
  <li>
    <h4>リスト1</h4>
    <p><img src="http://placehold.it/960x411" alt=""></p>
    <p>テキストテキストテキスト</p>
  </li>
  <li>
   ...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    color:#888;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0 0 1em 0;
}

h2{
    background:#eee;
    padding:10px 25px;
    margin:10px 0;
}

/**
 * Container
 */
.container {
    width: 960px;
    margin: 1em auto;
}

img {
    max-width: 100%;
}

/**
 * Grids
 */
.grids {
    list-style: none;
    padding: 1em 0 2em 0;
    margin: 0;
    overflow: hidden;
}

.grids li {
    float: left;
    width: 33.33333%;
    padding: 1em;
    border: 1px #eee solid;
}

.grids[data-columns="4"] li {
    width: 25%;
}

.grids .orphan-column-1, .grids[data-columns] .orphan-column-1 {
    width: 100%;
}

.grids .orphan-column-2, .grids[data-columns] .orphan-column-2 {
    width: 50%;
}

.grids .orphan-column-3, .grids[data-columns] .orphan-column-3 {
    width: 33.33333%;
}

/**
 * Orphan 1
 */
/** Media Query */
@media only screen and (max-width: 600px) {
    .container {
        width: auto;
    }

    .grids > li {
        float: none;
        width: auto;
    }
}

JavaScript

/**
 * Easily Browser through heirarchical list of taxonomies
 * @lastModified 8 August 2013 12:19AM
 * @author Vinay@artminister.com
 * @url http://github.com/PebbleRoad/jquery-layout-balancer
 */;
(function($) {
    'use strict';
    $.layoutBalancer = function(el, options) {
        var base = this;
        base.$el = $(el);
        base.el = el;
        base.options = $.extend({}, $.layoutBalancer.defaultOptions, options, base.$el.data());
        base.$el.data('layoutBalancer', base);
        base.$el.child = base.$el.children();
        base.init = function() {
            this.orphans = base.$el.child.length % base.options.columns;
            base.$el.child.slice(0, this.orphans)
                .addClass('orphan-column-' + this.orphans);
        };
        base.init();
        base.destroy = function() {
            base.$el.child.removeClass(function(i, klass) {
                return (klass.match(/\orphan-\S+/g) || []).join(' ');
            });
        };
    };
    $.layoutBalancer.defaultOptions = {
        columns: 3
    };
    $.fn.layoutBalancer = function(options) {
        return this.each(function() {
            (new $.layoutBalancer(this, options));
        });
    };
    $.fn.getlayoutBalancer = function() {
        this.data('layoutBalancer');
    };
    $.fn.destroylayoutBalancer = function() {
        this.each(function() {
            $(this).data('layoutBalancer').destroy();
        })
    };

})(jQuery, undefined);
 $(document).ready(function(){

        $('.balancer').layoutBalancer({
            columns: 3 /* Number of columns in the gallery */
        });
    });