如何让 CSS Grid 自适应容器尺寸并保持固定宽高

本文介绍如何通过 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 < cols * rows; i++) { const cell = document.createElement('div'); cell.className = 'grid-item'; container.appendChild(cell); } // 关键：动态设置行列尺寸（注意：此处 cols 对应列数 → 控制列宽，rows 控制行高） container.style.gridTemplateColumns = `repeat(auto-fit, calc(var(--size) / ${cols}))`; container.style.gridTemplateRows = `repeat(auto-fit, calc(var(--size) / ${rows}))`;};// 示例调用：生成 16×16 网格（适配 400px 容器 → 每格 25px）populateGrid('container', 16, 16);对应 CSS（styles.css）： 知网AI智能写作 知网AI智能写作，写文档、写报告如此简单