如何使用javascript创建一个css网格，其中javascript的变量为；细胞；？

我正在尝试（用Javascript）

将div样式设置为CSS网格，其中的行数和列数可以更改（取决于将来的提示元素）

第一次加载页面时，默认此网格为16x16

创建并将div附加到此网格，以填充所有网格区域。e、 g.在16x16网格中，将创建256个div

我试图通过一个循环来实现这一点。如下所示：

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

const gridContainer=document.getElementsByClassName（“网格”）；
设rowtot=16；
设celltot=rowno*rowno；
gridContainer.style.display=“网格”；
gridContainer.style.gridTemplateRows=`repeat（${rowtot}，1fr）`；
gridContainer.style.gridTemplateColumns=`repeat（${rowtot}，1fr）`；
设row=1；
设列=1；
对于（假设i=1；i可能是这样；）


let gridContainer=document.querySelector（'.grid'）；
设rowtot=16；
设celltot=rowtot*rowtot；
gridContainer.style.display='grid'；
gridContainer.style.gridTemplateRows=`repeat（${rowtot}，1fr）`；
gridContainer.style.gridTemplateColumns=`repeat（${rowtot}，1fr）`；
设row=1；
设列=1；
对于（设i=1；i）以及代码中有什么不符合预期的情况？
.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);

}