css变量无法控制repeat()的重复次数，因规范禁止非字面量数字；可用变量控制minmax()最小宽、gap和grid-auto-rows；需js动态设置固定列数；auto-fit与auto-fill在变量环境下行为差异显著。
grid-template-columns 里不能用 var(--cols) 控制 repeat() 的重复次数
浏览器解析时直接拒绝非字面量数字作为 repeat() 的第一个参数，哪怕变量存在且值为 3，写成 repeat(var(--cols), 1fr) 也会静默失效——DevTools 的 Computed 面板中该属性为空，整条 CSS 规则被丢弃，且不报错。
这不是写法错误，也不是兼容性问题，而是 CSS 规范层面的硬性限制。Chrome、Firefox、Safari、Edge 全部一致行为。
常见误操作包括：
- 在 Less/SCSS 中用
~"repeat(@{n}, 1fr)"字符串拼接 —— 编译后变量不展开，类型不可校验，也无法参与数学运算 - 试图用
calc(var(--cols))或attr(data-cols)绕过 —— 同样不被支持 - 把
--cols: 3放进 :root，再在样式里引用 —— 仍无效
真正能用 CSS 变量控制的只有 minmax() 和 gap
把控制焦点从“列数”转向“列宽下限”，让 auto-fit 承担响应逻辑。CSS 变量可安全用于：
-
minmax()的第一个参数（最小宽度），如minmax(var(--grid-min), 1fr) -
gap、row-gap、column-gap -
grid-auto-rows，例如minmax(var(--row-height), auto)
推荐基础写法：
html
:root {
--grid-min: 280px;
--grid-gap: 1.2rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)));
gap: var(--grid-gap);
}
注意：--grid-min 别用 em 或 rem —— 字体缩放会意外触发换行；更稳的是 clamp(160px, 25vw, 300px)。
必须用 JS 动态设置固定列数的场景
当你明确需要「就是 N 列」，且 N 来自运行时（如用户偏好、URL 参数 ?cols=4、API 返回），CSS 层面完全无解。
实操要点：
- 读取变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()) || 1 - 写入样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`（内联样式优先级高于 CSS 规则） - 高频更新（如 resize）必须防抖；只在初始化、
storage事件或自定义事件中触发 - 避免在
scroll或input中直接调用，否则重排开销不可控
auto-fit 和 auto-fill 在变量环境下的关键差异
用变量控制 minmax() 时，二者行为差异会被放大，尤其当 --grid-min 值偏大或容器尺寸处于临界点：
-
auto-fit：合并空轨道，已有列均分剩余空间 —— 适合卡片列表、导航栏等“内容驱动”场景 -
auto-fill：保留所有符合minmax()的轨道（含空列）—— 适合仪表盘占位、拖拽区域等需预留槽位的场景 - 小屏下若列数没变，先查
--grid-min是否已超容器可用宽度（减去gap后），再确认父容器是否被其他样式挤压
真正容易被忽略的是：子项一旦设了 width、float、position: absolute，或包裹在 display: flex 容器里，auto-fit 就会彻底失效 —— Grid 轨道计算中断，降级为普通块流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
