本文介绍如何用现代 css grid 替代手动计算尺寸的 javascript 方案，解决网格单元格在行列数超过 4 时溢出容器的问题，实现响应式、无滚动、等宽高等比例的正方形网格。
本文介绍如何用现代 css grid 替代手动计算尺寸的 javascript 方案，解决网格单元格在行列数超过 4 时溢出容器的问题，实现响应式、无滚动、等宽高等比例的正方形网格。
要构建一个稳定、可扩展且不溢出的正方形网格，关键在于**放弃手动计算像素尺寸**，转而利用 CSS Grid 的弹性布局能力。原代码中通过 `x = 400 / n` 动态设置每个方块宽高，并硬编码容器尺寸，导致浮点误差累积、边框/间距未纳入计算、`row` 容器逻辑冗余——这些正是溢出的根源。✅ 推荐方案：纯 CSS Grid + 语义化 JS 控制
将网格容器设为 display: grid，通过 grid-template-rows/columns 动态声明等分轨道，配合 gap 精确控制间距，所有子元素（方块）自动均分可用空间：
#container {
width: 410px;
height: 410px;
border: 3px solid black;
padding: 3px; /* 内边距预留边框空间 */
gap: 3px; /* 方块间间隙，替代手动边框叠加计算 */
display: grid;
/* 后续由 JS 动态注入 repeat(n, 1fr) */
}
.box {
border: 3px solid black;
background-color: blue;
/* 无需设置 width/height —— Grid 自动分配 */
}对应 JavaScript 逻辑大幅简化，专注数据驱动而非尺寸运算：
function updateGrid(n) {
const container = document.getElementById('container');
// 清空旧网格
container.innerHTML = '';
// 创建 n² 个方块
for (let i = 0; i < n * n; i++) {
const box = document.createElement('div');
box.classList.add('box');
container.appendChild(box);
}
// 告诉 Grid 划分为 n×n 等分网格
container.style.gridTemplateRows = `repeat(${n}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
}
// 输入校验与防呆处理
document.querySelector('input').addEventListener('input', function () {
const val = Math.abs(Math.floor(+this.value)) || 0;
if (Number.isInteger(val) && val >= 1 && val <= 20) {
updateGrid(val);
} else {
this.value = ''; // 非法输入清空
}
});? 注意事项：
- 避免硬编码尺寸：原方案中 c.style.width = (x * n) + 10 + "px" 忽略了边框、padding 和 gap 占用的空间，导致实际宽度超限；
- 1fr 是黄金单位：它让每行/列均分剩余空间，天然适配任意 n，无需浮点运算；
- gap 替代边框模拟间距：比在每个 .box 上加 border 更可控（否则 5×5 网格会有 6 条垂直/水平分隔线，易引发尺寸偏差）；
- 性能与体验：限制最大 n ≤ 20（400 个元素），防止 DOM 过载；使用 Math.floor() 和 Math.abs() 提升输入鲁棒性。
最终效果：无论输入 3、5、12 或 20，网格始终严格约束在 410×410px 容器内，每个方块保持完美正方形，无溢出、无滚动、无 JS 尺寸计算错误——这才是现代 Web 布局的正确实践。
