JSFiddle - React, Tailwind, and code Playground

HTML

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

</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: black;
    }
.box {
    position: relative;
    width: 32%;
    height: 47%;
    background: red;
    float: left;
    margin: 0;
    margin-left: 1.2%;
    margin-top: 1.2%;
}
.into {
    position: relative;
    width: 22%;
    height: 48%;
    background: indigo;
    float: left;
    margin: 0;
    margin-left: 4%;
    margin-top: 4%;
    } 
.box div:first-child {margin: 0;}
.box div:first-child+div, .box div:first-child+div+div, .box div:first-child+div+div+div {margin-top: 0;}
.box div:first-child+div+div+div+div {margin-left: 0;}

JavaScript

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