JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
               <div class="row">
                <div class="tencol">
                    <section class="block clearfix">
                        <h1>Ten col</h1>
                        <div class="inner clearfix">
                            <ul class="gallery">
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>LongWordTesting123 Test</li>
                                <li><div class="thumb"></div><br>Over two or three lines or more testing</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                                <li><div class="thumb"></div><br>Caption</li>
                            </ul>
                        </div><!--/inner-->
                    </section><!--/block-->                   
                </div><!--/col-->
            </div><!--/row-->
            </div><!--/container-->?

CSS

/* relevant snippets from the 1140 framework */

.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .tencol {
width: 82.7%;
    background: #ddd;
}

/* end framework snippets */

/* define an extendable block class - to suit design framework */
.block {
    padding: 20px;
}

/* A standard list to contain gallery images / text */

ul.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.gallery li {
    float: left;
    font-size: 0.7em;
    margin: 0 5% 30px 0;
}

ul.gallery img {
    margin-bottom: 5px;
    border: 3px solid #fff;    
}

div.thumb {
    width: 100%;
    height: 100px;
    background: #ccc;
}

/* This is where media queries would kick in and percentages defined for column sizes based on viewport size */
/* In this case, it's for a nine / ten column block (the 1140 grid has twelve columns) */

.ninecol ul.gallery li,.tencol ul.gallery li {
    width: 16%;
}

.ninecol ul.gallery li:nth-child(5n+5),.tencol ul.gallery li:nth-child(5n+5) {
    margin-right: 0;
}

/* clear first item of each row */
ul.gallery li:nth-child(5n+6) {
  clear: left;
}