本文介绍如何通过 CSS 变量与 auto-fit 配合 calc() 动态计算行列尺寸，使网格项始终严格填充固定大小的容器，无论行列数如何变化。
本文介绍如何通过 css 变量与 `auto-fit` 配合 `calc()` 动态计算行列尺寸，使网格项始终严格填充固定大小的容器，无论行列数如何变化。
在构建类似 SketchPad 这类需要动态调整网格密度（如 16×16、32×32）但又必须严格约束在固定画布区域内的应用时，常见误区是直接用 grid-template-rows: repeat(N, 1fr) —— 这会导致总行高/列宽随 N 增大而“撑开”容器，违背“容器尺寸恒定、单元格自动缩放”的设计目标。
正确解法是放弃控制行列数量，转而控制每个单元格的物理尺寸，并利用 CSS Grid 的 auto-fit + calc() 实现响应式填充：
✅ 核心思路
- 容器尺寸固定（如 400px × 400px）；
- 通过 CSS 自定义变量（如 --size: 400px）统一管理基准尺寸；
- 使用 repeat(auto-fit, calc(var(--size) / N)) 让浏览器自动计算每行/列应分配的宽度/高度，并尽可能多地重复该尺寸单元格；
- auto-fit 在空间充足时会拉伸单元格填满容器；若空间不足则自动换行（对正方形网格而言，配合 inline-grid 和合理宽高比可确保单层铺满）。
✅ 推荐实现代码
/* styles.css */
:root {
--size: 400px; /* 容器基准尺寸，可全局复用 */
}
#container {
width: var(--size);
height: var(--size);
display: inline-grid; /* 避免 block 默认换行，便于多画布排列 */
margin: 0.5em;
gap: 0;
}// App.js
function makeGrid(rows, cols) {
const container = document.getElementById("container");
// 清空旧网格
container.innerHTML = "";
// 创建指定数量的单元格
for (let i = 0; i < rows * cols; i++) {
const cell = document.createElement("div");
cell.className = "grid-item";
container.appendChild(cell);
}
// 动态设置行列尺寸：每个单元格 = 容器尺寸 ÷ 行数（或列数）
// 注意：此处 rows 控制行高，cols 控制列宽；若需正方形网格，建议 rows === cols
container.style.gridTemplateColumns = `repeat(auto-fit, calc(var(--size) / ${cols}))`;
container.style.gridTemplateRows = `repeat(auto-fit, calc(var(--size) / ${rows}))`;
}
// 示例调用：生成 20×20 网格，仍严格限制在 400×400px 内
makeGrid(20, 20);<!-- HTML 片段 --> <div id="container" class="sketchpad"></div>
⚠️ 关键注意事项
- auto-fit vs auto-fill：优先使用 auto-fit，它会在剩余空间中拉伸单元格；auto-fill 则保留空轨道，易导致网格未填满。
- 行列一致性：若要求所有单元格为正方形（SketchPad 典型需求），务必保证 rows === cols，否则 calc(var(--size)/rows) 与 calc(var(--size)/cols) 不等，将产生矩形格子。
- 避免内联样式污染：生产环境建议将 gridTemplateColumns/Rows 改为切换 CSS 类（如 .grid-16x16, .grid-32x32），提升可维护性与性能。
- 边界容错：用户输入尺寸时（如 <input type="text" placeholder="Size of Board">），务必校验范围（推荐 2–100），防止 calc(400px / 1) 导致单格过大或 calc(400px / 0) 报错。
✅ 总结
真正的“自适应网格”不在于动态修改 --grid-rows/--grid-cols 后靠 1fr 分配，而在于以容器为锚点、以数学计算为手段、以 auto-fit 为调度器，让 CSS Grid 主动适配数据规模。此方案零依赖 JS 布局计算，渲染高效，语义清晰，是现代 CSS 响应式网格的最佳实践之一。
