js grid

// 示例代码：使用JavaScript创建一个简单的网格（Grid）

// 创建一个5x5的网格
function createGrid(rows, cols) {
    const gridContainer = document.createElement('div');
    gridContainer.style.display = 'grid';
    gridContainer.style.gridTemplateRows = `repeat(${rows}, 50px)`;
    gridContainer.style.gridTemplateColumns = `repeat(${cols}, 50px)`;
    gridContainer.style.gap = '2px';
    gridContainer.style.width = '250px';
    gridContainer.style.height = '250px';
    gridContainer.style.border = '1px solid black';

    for (let i = 0; i < rows * cols; i++) {
        const cell = document.createElement('div');
        cell.style.backgroundColor = 'lightgray';
        cell.style.textAlign = 'center';
        cell.style.lineHeight = '50px';
        cell.innerText = `Cell ${i + 1}`;
        gridContainer.appendChild(cell);
    }

    document.body.appendChild(gridContainer);
}

// 调用函数创建网格
createGrid(5, 5);

// 解释说明：
// 1. `createGrid` 函数接受两个参数：行数和列数。
// 2. 使用 CSS Grid 布局来创建一个网格容器，并设置其行和列的数量。
// 3. 每个单元格（cell）是一个 div 元素，设置了背景颜色、文本对齐方式和内容。
// 4. 最后将网格容器添加到页面的 body 中。