JSFiddle - React, Tailwind, and code Playground

HTML

<article id="container">
    <section class="box">1</section>
    <section class="box">2</section>
    <section class="box">3</section>
    <section class="box">4</section>
    <section class="box">5</section>
    <section class="box">6</section>
    <section class="box">7</section>
    <section class="box">8</section>
    <section class="box">9</section>
    <section class="box">10</section>
    <section class="box">11</section>
    <section class="box">12</section>
    <section class="box">13</section>
    <section class="box">14</section>
    <section class="box">15</section>
    <section class="box">16</section>
    <section class="box">17</section>
    <section class="box">18</section>
    <section class="box">19</section>
    <section class="box">20</section>
</div>

CSS

#container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    
}


/* decorative styles */
#container {
    border: 1px solid #ccc;
    background-color: lightyellow;
    height: 300px;
    width: 500px;
}

.box {
    border: 1px solid #ccc;
    background-color: lightgreen;
    height: 50px;
    width: 50px;
    margin: 10px;
    
    /* center align numbers */
    display: flex;
    justify-content: center;
    align-items: center;
}