如何让 CSS Grid 自适应容器尺寸并保持固定宽高-js教程-PHP中文网

本文介绍如何通过 CSS 变量与 auto-fit 配合 calc() 动态计算行列尺寸，使 Grid 布局始终严格贴合预设容器大小（如 400×400px），无论行列数如何变化，单元格自动等比缩放，杜绝溢出或留白。

本文介绍如何通过 css 变量与 `auto-fit` 配合 `calc()` 动态计算行列尺寸，使 grid 布局始终严格贴合预设容器大小（如 400×400px），无论行列数如何变化，单元格自动等比缩放，杜绝溢出或留白。

在构建类似 SketchPad 的网格画布时，一个常见误区是：仅通过 grid-template-rows: repeat(var(--rows), 1fr) 和 grid-template-columns: repeat(var(--cols), 1fr) 控制行列数量——这会导致当行列数增加时，每个 1fr 单元实际占据的像素变小，但容器内总网格面积仍会因子元素 padding、border 或渲染微差而轻微溢出；更关键的是，1fr 是比例分配，不绑定绝对尺寸，无法保证网格整体“撑满且不突破”固定容器边界。

✅ 正确解法是：放弃用 1fr 分配比例，转为用 calc() 精确计算每个单元格的绝对尺寸，并借助 auto-fit 实现弹性列/行填充。核心思路如下：

将容器宽高定义为 CSS 变量（如 --size: 400px），便于复用与动态更新；
使用 repeat(auto-fit, calc(var(--size) / N)) —— auto-fit 会自动重复指定轨道，直到填满容器；calc() 则确保每项宽度/高度 = 容器尺寸 ÷ 目标数量；
避免使用 grid-gap（或设为 0），防止间隙干扰尺寸精度；若需视觉间距，改用 padding + box-sizing: border-box 控制单元格内部留白。

以下是可直接运行的优化实现：

// App.js：动态生成适配网格
const populateGrid = (containerId, cols, rows) => {
  const container = document.getElementById(containerId);
  // 清空旧网格
  container.innerHTML = '';
  // 创建 cells
  for (let i = 0; i <p>对应 CSS（styles.css）：</p><pre class="brush:php;toolbar:false;">:root {
  --size: 400px; /* 统一基准尺寸，可 JS 动态修改 */
}

#container {
  width: var(--size);
  height: var(--size);
  display: inline-grid; /* 推荐 inline-grid，避免块级换行干扰 */
  margin: 0;
  padding: 0;
  gap: 0; /* 彻底禁用 gap，确保尺寸精准 */
}

.grid-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  box-sizing: border-box; /* 确保 border/padding 不撑大单元格 */
}

? 重要注意事项：

auto-fit 与 auto-fill 的区别：auto-fit 会折叠空轨道，更适合“填满即止”的画布场景；auto-fill 则强制渲染所有轨道（含空白），易导致滚动或溢出。
若需响应式支持（如容器尺寸随窗口变化），建议监听 resize 并重新调用 populateGrid，或改用 container 的 offsetWidth/Height 替代 --size 变量（需 JS 计算）。

HTML 中的 onchange="changeSize(this.value)" 应调用类似逻辑：

function changeSize(value) {
  const size = parseInt(value);
  if (size >= 2 && size

总结：网格自适应 ≠ 依赖 fr 单位，而是要锚定容器绝对尺寸，用 calc() 精算单元格大小，再以 auto-fit 实现弹性布局。该方案零依赖外部库，兼容所有现代浏览器，且性能优异（纯 CSS 渲染，无重排压力），是 SketchPad、棋盘、仪表盘网格等场景的理想实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！