不能用 repeat(var(--cols), 1fr) 控制列数，因 css 不支持变量作为 repeat() 第一参数；须用 minmax(calc(), 1fr) 配合 auto-fit 动态计算列宽，结合容器级变量、强制重排及 grid-auto-rows 才能实现可靠响应式网格。
直接说结论：不能用 repeat(var(--cols), 1fr) 控制列数，必须用 minmax() + auto-fit + calc() 组合来动态算出每列最小宽度，否则网格会退化成单列或行为不可控。
为什么 repeat() 不接受 CSS 变量
浏览器解析 repeat() 时，第一个参数必须是整数字面量（如 4）或 auto-fit/auto-fill。即使你定义了 --cols: 4，repeat(var(--cols), 1fr) 中的 var(--cols) 返回的是字符串 "4"，不是数值，CSS 引擎直接忽略该声明，回退到默认单列布局。
这不是兼容性问题，而是规范限制——所有现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+）都如此处理。
- 错误写法：
grid-template-columns: repeat(var(--cols), 1fr); - 正确思路：放弃控制“列数”，转而控制“每列最小能缩到多窄”，让
auto-fit自动决定列数 - 变量只用于参与
calc()运算，最终喂给minmax()的第一个参数
用 calc() 动态算 minmax() 的下限值
目标是：“最多显示 6 列，间隙 20px，每列最小宽度不小于 260px，但容器变宽时列数可增加”。关键不是硬编码 260px，而是让这个“最小宽度”随容器宽度和最大列数联动：
假设变量定义为：--grid-gap: 20px、--grid-max-cols: 6，那么单列最小宽度应为：calc((100% - (var(--grid-gap) * (var(--grid-max-cols) - 1))) / var(--grid-max-cols))
- 先算总间隙：6 列 → 5 个间隙 →
var(--grid-gap) * (var(--grid-max-cols) - 1) - 再算可用宽度：全宽减总间隙 →
100% - ... - 最后均分：除以最大列数 → 得到“撑满时每列最小宽度”
- 把这个
calc()塞进minmax()：minmax(calc(...), 1fr)
完整声明示例：
.grid {
--grid-gap: 20px;
--grid-max-cols: 6;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc((100% - (var(--grid-gap) * (var(--grid-max-cols) - 1))) / var(--grid-max-cols)), 1fr));
gap: var(--grid-gap);
}
变量作用域和 JS 更新时的坑
把变量写在 :root 是最常见错误——一旦多个网格区域（主区、侧边栏、弹窗）共用同一组变量，改一个就全崩。比如产品经理说“侧边栏卡片间距改成 12px”，你改了 :root 里的 --grid-gap，首页推荐流也跟着缩窄了。
- 正确做法：变量绑定到具体容器上，如
.main-grid { --grid-gap: 20px; } - JS 更新时不能只设变量：
el.style.setProperty('--grid-gap', '12px')后，样式不会自动重排 - 必须触发强制重排，例如：
getComputedStyle(el).width或el.offsetHeight - 漏写 fallback（如
var(--grid-gap, 20px)）没用——变量名拼错时 fallback 不生效，整条calc()静默失效
高度自适应与网格行轨道的配合
如果卡片内容高度不一，光靠列控制不够，还得管行高。别用 grid-template-rows: auto，它只影响显式写的那几行；真正起效的是 grid-auto-rows: auto，它控制所有隐式生成的行轨道。
- 安全写法：
grid-auto-rows: minmax(12rem, auto)，避免空卡片塌缩 - 卡片自身不能设
height、max-height或overflow: hidden，否则内容被截断 - UI 框架（如 Mantine）常加
contain: layout，会切断高度传播，调试时临时去掉验证 -
flex: 1在 column 布局中更稳，但要求父容器明确设高度，且头尾区域用flex: 0 0 auto
真正难的从来不是写对一行 calc()，而是变量定义位置、JS 更新时机、以及网格行/列逻辑是否同步——这三个点错一个，整个动态网格就“看起来差不多，但总差一口气”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
