JSFiddle - React, Tailwind, and code Playground

by Otobong Okoko

HTML

<p>Small Container (1-column):</p>
<div id="one" class="container col">
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
</div>
<p>Medium Container (2-column):</p>
<div id="two" class="container col">
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
</div>
<p>Large Container (3-column):</p>
<div id="three" class="container col">
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
    <div class="item-min">Maudie Mcmanus</div>
    <div class="item-min">Remedios</div>
    <div class="item-min">Chaya B</div>
    <div class="item-min">Duncan</div>
    <div class="item-min">Lashonda</div>
</div>

CSS

* { box-sizing: border-box; padding: 0; margin: 0; }
p { margin-left: 16px; }
.container { width: 400px; border: 1px solid #f00; margin: 16px; }
.container.col { -webkit-columns: auto 120px; columns: auto 120px; }
.container > div { 
    -webkit-column-break-inside: avoid; column-break-inside: avoid; 
    display: block; padding: 8px; border: 1px solid #ccc;
}
#one { width: 200px; }
#two { width: 300px; }