JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div class="gallery">
 <dl class="item">content 1</dl>
 <dl class="item">content 2</dl>
 <dl class="item">content 3</dl>

 <dl class="item">content 4</dl>
 <dl class="item">content 5</dl>
 <dl class="item">content 6</dl>
    
 <dl class="item">content 7</dl>
 <dl class="item">content 8</dl>
 <dl class="item">content 9</dl>
</div>

CSS

* {box-sizing: border-box;}

.gallery {
    width: 75%;
    margin: 20px auto;
    border: 1px solid red;
    height: auto;
}

.gallery dl {
    height: 120px;
    margin-right: 2%;
    width: 11%;
    float: left;
    border: 1px solid blue;
}

.gallery dl:nth-child(3n) {
    margin-right: 0;
}

.gallery dl:nth-child(3n+1) {
    clear: both;
}

.gallery:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}