在前端页面开发中，动态生成正方形网格布局是常见需求，比如商品展示墙、相册网格等场景都需要这类规整的布局效果。实现这类布局的核心是通过JavaScript动态创建DOM元素，再配合CSS设置宽高比例和排列规则，最终形成整齐的正方形网格结构。
实现核心思路
要动态创建正方形网格布局，主要分为三个步骤：首先通过JavaScript创建指定数量的网格项元素，然后设置每个网格项的样式保证宽高相等形成正方形，最后通过CSS网格布局或者弹性布局实现整体的排列效果。其中保证每个网格项是正方形的关键，是让元素的高度等于宽度，而宽度可以通过父容器的宽度和列数计算得出。
基础实现代码示例
下面是一个完整的实现示例，会创建一个包含12个正方形网格项的布局，网格分为4列，每个网格之间有10px的间距。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态正方形网格布局</title>
<style>
.grid-container {
display: grid;
/* 设置4列，每列宽度相等 */
grid-template-columns: repeat(4, 1fr);
/* 网格间距 */
gap: 10px;
padding: 20px;
background-color: #f5f5f5;
}
/* 正方形网格项的基础样式 */
.grid-item {
background-color: #4a90e2;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="grid-container" id="gridContainer"></div>
<script>
// 网格总数量
const itemCount = 12;
// 网格列数
const columnCount = 4;
// 获取容器元素
const gridContainer = document.getElementById('gridContainer');
// 存储所有网格项宽度，用于计算高度
let itemWidth = 0;
// 创建网格项的函数
function createGridItems() {
// 清空容器原有内容
gridContainer.innerHTML = '';
// 计算单个网格项的宽度，减去间距的影响
// 容器总宽度减去所有列之间的间距，再除以列数
const containerWidth = gridContainer.clientWidth;
const totalGap = (columnCount - 1) * 10;
itemWidth = (containerWidth - totalGap) / columnCount;
// 循环创建网格项
for (let i = 0; i < itemCount; i++) {
const gridItem = document.createElement('div');
gridItem.className = 'grid-item';
// 设置宽度
gridItem.style.width = `${itemWidth}px`;
// 高度等于宽度，形成正方形
gridItem.style.height = `${itemWidth}px`;
// 添加序号文本
gridItem.textContent = i + 1;
gridItem.style.color = '#fff';
gridItem.style.display = 'flex';
gridItem.style.alignItems = 'center';
gridItem.style.justifyContent = 'center';
gridItem.style.fontSize = '20px';
// 将网格项添加到容器
gridContainer.appendChild(gridItem);
}
}
// 初始化创建网格
createGridItems();
// 监听窗口 resize 事件，调整网格大小
window.addEventListener('resize', () => {
createGridItems();
});
</script>
</body>
</html>
代码逻辑解析
上面的代码中，首先通过grid-template-columns: repeat(4, 1fr)设置容器为4列等宽布局，gap属性设置网格之间的间距。JavaScript部分的核心逻辑是：
- 先获取容器的实际宽度，减去所有列之间的总间距，再除以列数得到单个网格项的宽度
- 动态创建对应数量的
div元素，设置其宽度和高度相等，保证是正方形 - 监听窗口的
resize事件，当窗口大小变化时重新计算网格项尺寸，保证布局始终适配
参数调整说明
如果需要修改网格的列数或者总数量，只需要调整代码中itemCount和columnCount两个变量的值即可。比如将columnCount改为3，就会生成3列的网格布局，JavaScript会自动重新计算单个网格项的宽度，保证每个网格项依然是正方形。
注意事项
在实际使用中，如果网格项内部有内容，需要注意内容不要超出正方形区域，可以通过overflow: hidden或者调整内边距来避免内容溢出。另外如果页面中有其他影响容器宽度的样式，需要在计算宽度时考虑进去，保证计算结果的准确性。
JavaScript正方形网格布局DOM操作动态布局css_grid修改时间：2026-06-12 07:27:23