JSFiddle - React, Tailwind, and code Playground

HTML

<div>This layout will fit 3 squares wide for any screen width</div>

<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>

<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>

CSS

.square {
    background-color: orange;
    width: 30%;
    padding-bottom: 30%;
    margin: 1.5%;
    float: left;
}

@media (max-width: 480px) {
    .square {
        background-color: purple;
        width: 48.5%;
        padding-bottom: 48.5%;
        margin: 0.75%
    }
}