html css 重复具有特定行数和列数的网格容器，如背景纹理

Question

我用下面的代码创建了一个网格，用作页面内的背景（背景网格），当我的屏幕滚动大于网格时，我希望网格容器作为背景纹理重复并填充直到它填满使用相同的 30x40 网格项目网格一次又一次地水平和垂直滚动。 我不能用背景重复来做到这一点，因为在每个网格项目中我需要放置一些文本所以我使用了网格但不知道如何去做。

如果可能的话，任何人都可以给我一个实现它的方法吗？

const therows = 20;
    const thecols = 10;
    const container = document.querySelector(".grid");
    let position = { x: 0, y: 1 };
    let x = 0;
    let y = 0;
            function makeGrid(rows, cols) {
                container.style.setProperty("--grid-rows", rows);
                container.style.setProperty("--grid-cols", cols);
                for (let c = 0; c < rows; c++) {
                    for (let d = 1; d <= cols; d++) {
                        y = c * cols + d;
                        let cell = document.createElement("div");
                        cell.innerHTML = y;
                        cell.num = y;
                        cell.id = y;
                        cell.NumX = c;
                        cell.NumY = d;
                        container.appendChild(cell).className = "grid-item grid-item-" + c + "" + d;
                    }
                }
            }


    const thesubrows = 20;
    var thesubcols = 30;
    const subcontainer = document.querySelector(".subgrid");
            function makeSubGrid(rows, cols) {
                subcontainer.style.setProperty("--subgrid-rows", rows);
                subcontainer.style.setProperty("--subgrid-cols", cols);
                    for (let e = 0; e < rows; e++) {
                        for (let f = 1; f <= cols; f++) {
                            y = e * cols + f;
                            let cell = document.createElement("div");
                            cell.innerHTML = y;
                            cell.num = y;
                            cell.id = y;
                            cell.NumX = e;
                            cell.NumY = f;
                            subcontainer.appendChild(cell).className = "subgrid-item subgrid-item-" + e + "" + f;
                        }
                    }
            }


            makeSubGrid(thesubrows, thesubcols);
            makeGrid(therows, thecols);

.wrapper {
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
   padding: 0;
}

.map {
        position: absolute;
        z-index: 20;
    }

.container {
      display: grid;
      grid-gap : 0;
      grid-template-rows: repeat(var(--grid-rows), 180px);
        grid-template-columns: repeat(var(--grid-cols), 100vw);
    }

.grid-item {
      display: flex;
      margin : 0;
      text-align: center;
      align-items: center;
    justify-content: center;
      border: 1px solid #ddd;
    }

.submap {
  position: absolute;
  z-index: 10;
}

.subcontainer {
  display: grid;
  grid-gap: 0;
  grid-template-rows: repeat(var(--subgrid-rows), 32.5px);
    grid-template-columns: repeat(var(--subgrid-cols), 35px);
  overflow: hidden;
}

.subgrid-item {
      display: flex;
      margin : 0;
      text-align: center;
      align-items: center;
    justify-content: center;
      border: 1px solid #ddd;
      background-color: #aaa;
    }

<div class="wrapper">
  <main class="map">
    <div class="container grid"></div>
  </main>
  <main class="submap">
    <div class="subcontainer subgrid"></div>
  </main>
</div>