JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  width: 100vw;
  height: 100vh;
}

#container div {
  border: 1px solid black;
  background: #ccc;
}

#container:has(div:nth-child(1)) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

#container:has(div:nth-child(2)) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

#container:has(div:nth-child(3)) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#container:has(div:nth-child(5)) {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#container:has(div:nth-child(7)) {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

JavaScript

window.onload = function() {
   var container = document.getElementById('container');
   
   var index = 1;

   setInterval(function() {
     if (container.childElementCount >= 9){
       container.innerHTML = '';
     }
   
     var divElement = document.createElement('div');
          
     divElement.innerHTML = 'div';
          
     container.appendChild(divElement);
   }, 1000);
}