CSS变量无法控制repeat()的重复次数，这是浏览器解析层的硬性限制；只能用变量控制minmax()阈值、gap等参数，固定列数需JS动态设置。
grid-template-columns 不能用 CSS 变量控制 repeat() 的重复次数——这不是写法问题，是浏览器解析层的硬性限制。你真正能动态控制的，只有 minmax() 的阈值、gap、grid-auto-rows 等协同参数。
为什么 --cols: 3 无法用于 repeat(var(--cols), 1fr)
浏览器在解析 grid-template-columns 时，会直接拒绝非字面量数字作为 repeat() 的第一个参数。即使变量存在且有值，repeat(var(--cols), 1fr) 也会静默失效：Computed 面板中该属性为空，整条规则被丢弃。
- 开发工具里能看到
grid-template-columns被划掉（strikethrough），但无报错提示 -
calc()、attr()、自定义属性函数（如env(--cols)）同样不被支持 - 这个限制存在于所有现代浏览器（Chrome/Firefox/Safari/Edge），不是兼容性问题，而是规范本身不允许
如何用 CSS 变量安全控制自适应列宽
把控制焦点从“列数”转向“列宽下限”，让 auto-fit 和 minmax() 承担响应逻辑。CSS 变量可安全用于 minmax() 的第一个参数（最小宽度）和 gap。
- 基础写法：
:root { --grid-min: 280px; --grid-gap: 1.2rem; }，然后grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)); gap: var(--grid-gap); - 避免用
em或rem作--grid-min值——字体缩放可能意外触发换行 - 若需多套配置（如卡片列表 vs 数据看板），用不同类名切换变量值，而非一个变量配一堆媒体查询
-
clamp()可配合变量做弹性 gap：gap: clamp(0.5rem, 2vw, var(--grid-gap));
什么时候必须放弃 CSS 变量，改用 JS 动态设置列数
当你明确要求「固定 N 列」，且 N 来自运行时（如用户偏好、API 返回、URL 参数），CSS 层面完全无解——auto-fit 是内容驱动的，不是指令驱动的。
- 读取变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()) || 1; - 写入样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;（注意：内联样式优先级高于 CSS 规则） - 高频更新场景（如 resize）必须防抖；推荐只在初始化或变量变更事件（
storage或customEvent）中触发 - 别在
scroll或input中直接调用，否则重排开销不可控
auto-fit 和 auto-fill 在变量环境下的行为差异
用变量控制 minmax() 时，auto-fit 与 auto-fill 的区别会被放大——尤其当 --grid-min 值偏大或容器尺寸临界时。
-
auto-fit：丢弃空轨道，剩余列拉伸填满；更符合“内容优先”的直觉，小屏下不易留白 -
auto-fill：保留所有可能轨道（哪怕没内容），易导致右侧空白或横向滚动条，调试时容易误判为“漏写了内容” - 验证方法：临时把
--grid-min设为极大值（如999px），观察是否只剩一列且居中——auto-fit会撑满，auto-fill会留出空列 - 绝大多数自适应场景应锁定
auto-fit，除非你刻意需要占位（如预留广告位）
实际项目中最容易被忽略的点是：你以为改了 --grid-min 就能立刻看到列数变化，但若容器宽度刚好卡在换行临界点（比如 559px 宽 + --grid-min: 280px），浏览器可能因子项隐式最小宽度（如图片、长单词）干扰而拒绝收缩——这时得加 min-width: 0 或 overflow: hidden 到子项上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
