JSFiddle - React, Tailwind, and code Playground

HTML

<div class="all">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

html, body {height: 100%; width: 100%; margin: 0; padding: 0; }
.all {
    position: relative;
    width: 100%;
    height: 50%;
    background: blue;
    }
.box {
    position: relative;
    width: 32%;
    height: 47%;
    background: red;
    float: left;
    margin: 0;
    margin-left: 1.2%;
    margin-top: 1.2%;
    }

JavaScript

htmlka = document.html;
htmlka.style.height = 0;
window.onresize = window.onload = function() {
    htmlka.style.height = htmlka.offsetWidth/1.1 + "px"; }