本文介绍通过 auto-fit 与动态计算单元格宽高，使 Grid 布局在行列数变化时仍严格约束在固定容器内，避免溢出或缩放失真。
本文介绍通过 `auto-fit` 与动态计算单元格宽高，使 grid 布局在行列数变化时仍严格约束在固定容器内，避免溢出或缩放失真。
要实现网格（Grid）无论行列数量如何变化，始终严丝合缝地填满预设尺寸的容器（如 400px × 400px），关键在于放弃“用 repeat(n, 1fr) 控制数量”的思路，转而由容器尺寸反推单个网格单元的物理尺寸，再借助 auto-fit 让 Grid 自动布局——这才是真正响应式、尺寸可控的方案。
✅ 正确思路：尺寸驱动，而非数量驱动
原代码中使用 CSS 变量 --grid-rows/--grid-cols 配合 repeat(var(--grid-rows), 1fr)，本质是让每个轨道均分剩余空间。当行列数增大时，1fr 的绝对值变小，但因 DOM 元素数量激增，浏览器渲染压力上升，且无法保证总尺寸恒定（尤其在 grid-gap 或边框存在时易导致溢出）。更严重的是：1fr 是比例单位，不绑定像素，无法锚定物理尺寸。
正确解法是：
- 将容器宽高定义为确定值（如 --size: 400px）；
- 用 calc(var(--size) / N) 直接计算每个单元格的宽度/高度；
- 使用 repeat(auto-fit, ...) 让 Grid 自动重复该固定尺寸的轨道，自动换行并填满空间；
- 配合 inline-grid 和 vertical-align 可控多网格对齐（非必需，但增强可维护性）。
? 实现代码示例
// 根据容器 ID、列数 x、行数 y 动态生成并设置网格
const populateGrid = (id, cols, rows) => {
const container = document.getElementById(id);
// 清空并重建 grid-items（避免残留）
container.innerHTML = Array.from({ length: cols * rows }, () => '<div></div>').join('');
// 关键：按容器尺寸反算单格宽高，并用 auto-fit 自动铺满
container.style.gridTemplateColumns = `repeat(auto-fit, calc(var(--size) / ${cols}))`;
container.style.gridTemplateRows = `repeat(auto-fit, calc(var(--size) / ${rows}))`;
};
// 示例调用：三组不同行列配置，均严格限制在 400px×400px 内
populateGrid('container', 16, 16); // SketchPad 默认 16×16
populateGrid('container', 32, 32); // 切换为高精度模式
populateGrid('container', 8, 8); // 简化视图
对应 CSS（精简可靠版）：
:root {
--size: 400px; /* 统一基准尺寸，便于 JS 和 CSS 同步 */
}
#container {
width: var(--size);
height: var(--size);
display: inline-grid; /* 推荐 inline-grid，避免块级换行干扰 */
margin: 0;
padding: 0;
gap: 0; /* 显式设为 0，避免默认 gap 影响尺寸精度 */
border: 1px solid #ccc;
}
.grid-item {
background: #f9f9f9;
border: 1px solid #e0e0e0;
box-sizing: border-box; /* 至关重要：确保 border/padding 不撑大单元格 */
}
⚠️ 关键注意事项
- 必须添加 box-sizing: border-box 到 .grid-item，否则 border 和 padding 会额外增加单元格尺寸，导致整体溢出；
- auto-fit 会自动折叠空轨道，配合 calc() 可完美适配任意行列组合；
- 若需支持用户输入（如 ），请务必校验输入值范围（建议 2–100），并在 changeSize() 中调用 populateGrid('container', n, n)；
- 避免在 JS 中反复 appendChild 创建大量节点（性能差），推荐 innerHTML 批量注入或 DocumentFragment。
✅ 总结
让 Grid “自适应容器尺寸”的本质，不是让网格去“猜”怎么缩放，而是由开发者明确声明“我要多少格，每格物理尺寸是多少”，再交由 auto-fit 完成智能排列。这种方法完全脱离 fr 单位的不确定性，尺寸精确、性能优异、逻辑清晰，特别适合 SketchPad、棋盘、仪表盘卡片等对布局精度要求高的场景。只需牢记三要素：固定容器尺寸 + calc() 精算单格像素 + auto-fit 自动布局，即可一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
