JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Container"></div>

CSS

#Container {
    margin:2em;
    max-width:100%;
    max-height:100%;
}
div {
    max-width:100%;
    max-height:100%;
    min-width:16.6%;
    min-height:auto;
    float:left;
}
div:nth-child(odd) {
    background:orange;
}
div:nth-child(even) {
    background:steelblue;
}
.sqr {
    width:2em;
    height:2em;
}

JavaScript

function addSqr() {
    for (var i = 0; i < 50; i++) {
        var container = document.getElementById("Container");
        var div = document.createElement("div");
        div.className = "sqr";
        container.appendChild(div);
    }
}

window.addEventListener("click", addSqr, false);