本文介绍如何用现代 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 = 1 && val <p>? 注意事项：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 避免硬编码尺寸：原方案中 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 布局的正确实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
