如何使用JavaScript动态创建正方形网格

在前端开发场景中，正方形网格常用于图片展示、游戏棋盘、数据可视化模块等场景，通过JavaScript动态创建可以灵活适配不同的业务需求，无需手动编写大量重复的HTML结构。实现的核心思路是先确定网格的行列数，再通过DOM操作批量创建正方形的网格项，最后通过CSS样式保证每个网格项都是正方形且整体布局规整。

基础实现步骤

1. 准备容器元素

首先在HTML中准备一个用于承载网格的容器，后续所有的网格项都会动态添加到这个容器中。

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

2. 编写CSS样式

通过CSS设置容器的布局方式为弹性布局，同时保证每个网格项都是正方形，这里使用padding-bottom:100%的经典正方形实现方案，配合绝对定位让内容填充整个正方形区域。

#grid-container {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
}

.grid-item {
    /* 每个网格项占容器宽度的20%，即一行5个 */
    width: 20%;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* 实现正方形核心样式 */
.grid-item::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.grid-item-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

3. JavaScript动态创建网格

通过JavaScript计算需要创建的网格项数量，循环生成DOM元素并添加到容器中，同时可以给每个网格项添加序号标识，方便后续区分。

/**
 * 动态创建正方形网格
 * @param {number} row 行数
 * @param {number} col 列数
 * @param {string} containerId 容器元素ID
 */
function createSquareGrid(row, col, containerId) {
    const container = document.getElementById(containerId);
    // 清空容器原有内容
    container.innerHTML = '';
    // 计算总网格数量
    const total = row * col;
    // 动态修改容器宽度，保证网格整体比例正常
    container.style.width = `${col * 100}px`;
    
    for (let i = 0; i < total; i++) {
        // 创建网格项元素
        const gridItem = document.createElement('div');
        gridItem.className = 'grid-item';
        
        // 创建网格项内容容器
        const content = document.createElement('div');
        content.className = 'grid-item-content';
        // 添加序号标识
        content.textContent = i + 1;
        
        // 组装元素
        gridItem.appendChild(content);
        container.appendChild(gridItem);
    }
}

// 调用函数创建5行5列的正方形网格
createSquareGrid(5, 5, 'grid-container');

动态修改网格规格

实际业务中经常需要让用户自定义网格的行列数，此时只需要给输入框绑定事件，重新调用创建函数即可实现动态更新。

<div class="control-panel">
    <label>行数：<input type="number" id="row-input" value="5" min="1" max="10"></label>
    <label>列数：<input type="number" id="col-input" value="5" min="1" max="10"></label>
    <button id="generate-btn">生成网格</button>
</div>

// 获取控制元素
const rowInput = document.getElementById('row-input');
const colInput = document.getElementById('col-input');
const generateBtn = document.getElementById('generate-btn');

// 绑定点击事件
generateBtn.addEventListener('click', () => {
    const row = parseInt(rowInput.value) || 5;
    const col = parseInt(colInput.value) || 5;
    // 限制最大行列数，避免网格过大
    const finalRow = Math.min(row, 10);
    const finalCol = Math.min(col, 10);
    createSquareGrid(finalRow, finalCol, 'grid-container');
});

常见问题与优化

• 网格项不是正方形：检查是否给grid-item元素添加了box-sizing: border-box，避免边框宽度影响尺寸计算。
• 网格整体溢出容器：动态计算容器宽度时，需要把网格项的边框宽度也计算进去，或者统一使用box-sizing: border-box避免尺寸偏差。
• 网格项内容对齐问题：使用flex布局让内容在正方形区域内居中，避免内容偏移影响视觉效果。

如果需要给网格项添加点击事件，可以直接在循环创建时为gridItem绑定事件监听，根据序号区分不同的网格项，实现对应的交互逻辑即可。

JavaScript动态创建正方形网格grid_layout修改时间：2026-07-06 14:06:11