让 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超级智能客服