'A x times x grid that keeps expanding

Okkkayy,

hi and welcome inside my head..

i want to make a 7x9 grid layout as a "starting point" like this +/-

then i want to add 3 rows every like 6 hours or so 3 rows added after X amout of time

thats the "Basic concept" of what i want to do. If i get this to work, i want that if a new "user" is registered than one 7x9 Block gets automatically. new 7x9 block if new user registers

i hope that this makes sense for anyone. My question is how do i do this task at best. I started with html/css + javascript but i did not manage to automatically add now rows/colums and all that.

im really thankfull for each one of you guy that trys to point me in the right direction.

cheers.

EDIT:

ok so for now i switched from Grid layout to table and it looks like this.

let randomPic = ["img/map1.jpg", "img/map4.jpg", "img/map5.jpg", "img/map6.jpg"];
// map6 wird zu map2 wenn eingenommen
// map4 und map5 wird zu map3 wenn eingenommen
// map1 darf nur alle 7 felder 1mal vorkommen


let divs = document.querySelectorAll("td");
let divArray = Array.prototype.slice.call(divs);


let imgSelected = false;

divArray.forEach(function(div) {
    if(!imgSelected) {
      let randomNum = Math.floor(Math.random() * randomPic.length);
      div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
      if (randomNum === 0) imgSelected = true; 
    } else {
      let filteredArray = randomPic.slice(1);
      let randomNum = Math.floor(Math.random() * filteredArray.length);
      div.style.backgroundImage = "url(" + filteredArray[randomNum] + ")";
    }
  });
 
$(document).ready(function(){
  $("#btn1").click(function(){
    $("tr").append('<td></td>');
  });
});



// divArray.forEach(function(div) {
//     let randomNum = Math.floor(Math.random() * randomPic.length);
//     div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
//   });

html, body {
  background-image: url(img/bg-gras.jpg);
}

.map {
  justify-content: center;
  text-align: center;
  display: grid
}

.center {
  margin: 100px;
}

td {
  width: 58px;
  height: 42px;
  background-image: url(img/map1.jpg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
    <div class="map">
        <table class="center">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <button id="btn1">New Div</button>
    </div>







    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

I hope even without the pictures you can see where i try to go. Next thing is that i need clickable left and right arrows that are like "go to next picture" and the picture in this case is a new row.

After i managed to get this THEN i need to take a look into automation like after X amount of time idk. :D im a work in progress...

anyway and anyhow cheers :)

btw: if you want to test this on your own theese are the pictures.

bg-grass

map1 map4 map5 map6