如何使用可變數目的“單元”的javascript創建CSS網格？

Question

我正在嘗試（使用Javascript）

1. 將div樣式設置為CSS網格，其中行和列的數量可以更改（取決於將來的提示元素）。

2. 首次加載頁面時，默認將此Grid為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>