JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div id="container">
    <div class="box" style="background:#f00"></div>
    <div class="box" style="background:#0f0"></div>
    <div class="box" style="background:#00f"></div>
    <div class="box" style="background:#ff0"></div>
    <div class="box" style="background:#0ff"></div>
    <div class="box" style="background:#f0f"></div>
    <div class="box" style="background:#500"></div>
    <div class="box" style="background:#050"></div>
    <div class="box" style="background:#005"></div>
    <div class="box" style="background:#550"></div>
    <div class="box" style="background:#055"></div>
    <div class="box" style="background:#505"></div>
    <span class="stretch"></span>
</div>

CSS

#container {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    font-size: 0;
    border: 1px solid red;
    margin: 10px;
    position: relative;
    overflow: hidden;
}

.box, .invisible {
    width: 100px;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-size: medium;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

JavaScript

$(new Array(9).join('<div class="invisible"></div>\n')).insertBefore('.stretch');

$(window).on('resize', function() {
    $('#container').height($('.box').last().position().top + $('.box').last().outerHeight());
    
    //make it still justify when there's only one row
    if ($('.box').first().position().top == $('.box').last().position().top) {
        $('.invisible').hide();
    } else {
        $('.invisible').show();
    }
}).resize();