JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

* {
        margin: 0;
        padding: 0;
    }
    
    .grid {
        display: table;
        outline: 1px solid blue;
        min-width: 330px;
        margin: 0 auto;
    }
    
    .grid > div {
        width: 100px;
        height: 61px;
        margin: 5px;
        background-color: teal;
        float: left;
    }

    @media screen and (min-width: 330px) and (max-width: 439px) {
        .grid > div:nth-of-type(3n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 440px) and (max-width: 549px) {
        .grid > div:nth-of-type(4n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 550px) and (max-width: 659px) {
        .grid > div:nth-of-type(5n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 660px) and (max-width: 769px) {
        .grid > div:nth-of-type(6n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 770px) and (max-width: 879px) {
        .grid > div:nth-of-type(7n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 880px) and (max-width: 989px) {
        .grid > div:nth-of-type(8n + 1) {
            clear: left;
        }
    }
    
    @media screen and (min-width: 990px) {
        .grid > div:nth-of-type(9n + 1) {
            clear: left;
        }    
    }