本文介绍如何用现代 css grid 替代手动计算尺寸的 javascript 方案，解决网格单元格在行列数超过 4 时溢出容器的问题，实现响应式、可伸缩且布局稳定的正方形网格。
本文介绍如何用现代 css grid 替代手动计算尺寸的 javascript 方案，解决网格单元格在行列数超过 4 时溢出容器的问题，实现响应式、可伸缩且布局稳定的正方形网格。
传统实现中，开发者常通过 prompt() 获取网格维度后，手动计算每个方块宽高并动态设置父容器尺寸（如 400 / n），但该方式极易因四舍五入误差、边框/内边距未纳入计算、或 flex 布局对子项尺寸约束不足，导致整体溢出——尤其当 n ≥ 5 时，累积误差放大，容器无法容纳所有方块。
根本问题在于：
- 使用 flex 布局 + 手动像素计算，缺乏对容器边界与子项比例关系的弹性控制；
- 每个 .square 行元素被赋予 width: x * n + "px"，但未设 box-sizing: border-box，导致 3px 边框额外增加尺寸；
- #container 的 position: fixed 和 transform 虽居中，却未限制最大尺寸，也无法响应式适配不同 n 值。
✅ 推荐方案：CSS Grid + 纯 CSS 尺寸分配
利用 grid-template-rows/columns: repeat(n, 1fr) 让浏览器自动均分可用空间，配合 gap 控制间距，彻底规避手动像素计算：
#container {
width: 410px;
height: 410px;
display: grid;
border: 3px solid black;
padding: 3px;
gap: 3px; /* 替代手动留白，更可靠 */
box-sizing: border-box; /* 关键：包含边框与内边距 */
}
.box {
border: 3px solid black;
background: blue;
box-sizing: border-box; /* 确保边框不撑大单元格 */
}
对应 JavaScript 逻辑大幅简化，无需逐行创建 DOM，仅需生成 n² 个 .box 元素，并动态设置 Grid 模板：
function updateGrid(n) {
// 清空旧网格
document.getElementById('container').textContent = '';
// 创建 n² 个方块
for (let i = 0; i {
const n = Math.abs(parseInt(e.target.value)) || 0;
if (Number.isInteger(n) && n >= 1 && n <pre class="brush:php;toolbar:false;"><div id="container"></div>
<input type="number" min="1" max="20" placeholder="输入网格边长（1–20）">? 关键优化点总结：
- ✅ 消除尺寸计算误差：1fr 单位由浏览器自动分配剩余空间，天然适配任意 n；
- ✅ 统一盒模型：box-sizing: border-box 确保 border 和 padding 不影响布局尺寸；
- ✅ 间隙可控：gap 属性替代手动为每个方块预留空白，避免嵌套 row 容器带来的复杂度与潜在溢出；
- ✅ 性能与可维护性提升：DOM 操作从 O(n²) 次元素创建 + 样式赋值，降为 O(n²) 次元素创建 + 2 次样式设置；
- ⚠️ 安全限制：n > 20 时主动截断，防止渲染卡顿或内存溢出。
最终效果：无论输入 3、5 还是 16，网格始终严格限定在 410×410px 容器内，方块大小随 n 增大而等比缩小，边缘无溢出、无滚动条，真正实现“所见即所得”的可控网格系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
