js 生成多行多列的宫格

好的，以下是一个生成多行多列的宫格的纯 JS 实现:

HTML 代码：

<div id="grid"></div>

CSS 代码：

#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 设定4列 */
    grid-template-rows: repeat(3, 100px); /* 设定3行 */
    grid-gap: 10px; /* 设定单元格间距 */
}
.cell {
    background-color: lightgray;
    text-align: center;
}

JS 代码：

const grid = document.getElementById('grid');
const rows = 3;
const cols = 4;

for (let i = 0; i < rows * cols; i++) {
    const cell = document.createElement('div');
    cell.classList.add('cell');
    cell.innerText = i + 1;
    grid.appendChild(cell);
}

这个示例代码使用了 CSS grid 布局来实现宫格的布局。JS 代码通过使用循环来生成单元格元素，并将它们添加到页面上。在生成单元格时，我们可以给它们添加一些样式，如背景颜色、文本对齐等。