javascript - 如何使用可变编号 "cells"的 javascript 创建一个 css 网格？

Question

我正在尝试(使用 Javascript)

1. 将 div 设置为 CSS 网格，其中的行数和列数可以更改(取决于 future 的提示元素)。

2. 当页面首次加载时，默认此网格为 16x16。

3. 创建 div 并将其附加到此网格，以填充所有网格区域。例如在 16x16 的网格中，将创建 256 个 div。

我试图通过循环来做到这一点。如下所示:

 <div class = "grid"> </div>

.grid{
    height: 70vh;
    width: 80vw;
}

const gridContainer = document.getElementsByClassName("grid");

let rowtot = 16;
let celltot = rowno * rowno;

gridContainer.style.display = "grid";
gridContainer.style.gridTemplateRows = `repeat(${rowtot}, 1fr)`;
gridContainer.style.gridTemplateColumns = `repeat(${rowtot}, 1fr)`;

let row = 1;
let column = 1;
for(let i = 1; i <= celltot; i++){
    let cell = document.createElement("div");
    cell.style.border = "1px solid black";
    cell.style.gridRow = row;
    cell.style.gridColumn = column;
    column +=1;
    if (column == 16){
        row += 1;
        column = 1;
    }
    gridContainer.appendChild(cell);

}

Answer 1

也许那样 ;)

let gridContainer = document.querySelector('.grid');

let rowtot = 16;
let celltot = rowtot * rowtot;

gridContainer.style.display = 'grid';
gridContainer.style.gridTemplateRows = `repeat(${rowtot}, 1fr)`;
gridContainer.style.gridTemplateColumns = `repeat(${rowtot}, 1fr)`;

let row = 1;
let column = 1;
for (let i = 1; i <= celltot; i++) {
  let cell = document.createElement('div');
  cell.style.border = '1px solid black';
  cell.style.gridRow = row;
  cell.style.gridColumn = column;
  cell.textContent = i;
  column += 1;
  if (column === rowtot + 1) {
    row += 1;
    column = 1;
  }
  gridContainer.appendChild(cell);
}

.grid {
  height: 70vh;
  width: 80vw;
}

<div class="grid"> </div>