让 CSS Grid 自适应容器尺寸的动态布局方案

本文介绍如何通过 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() 实现响应式填充： MacsMind 电商AI超级智能客服