JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile">Tile 1</div>
<div class="tile">Tile 2</div>
<div class="tile">Tile 3</div>
<div class="tile">Tile 4</div>
<div class="tile">Tile 5</div>
<div class="tile">Tile 6</div>
<div class="tile">Tile 7</div>
<div class="tile">Tile 8</div>
<div class="tile">Tile 9</div>

CSS

.tile {
    display: block;
    float: left;
    width: 25%;
    min-height: 100px;
    background: red;
    margin-bottom: 1px;
    
    padding: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tile:nth-child(even) {
    background: blue;
}

@media (max-width: 500px) {
    .tile {
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        width: 50%
    }
}