repeat()第一个参数只接受数字字面量或auto-fit/auto-fill，不支持var(--cols)，因其返回字符串而非数值；正确方案是用minmax()配合auto-fit及calc()动态计算最小轨道宽度。
:root 本身不参与布局计算，它只是变量容器；真正起作用的是把 var() 和 calc() 组合起来，在具体选择器里做动态运算。直接写 :root { --cols: 4; } 然后 grid-template-columns: repeat(var(--cols), 1fr); 是无效的——repeat() 不接受变量，必须用 calc() 或 minmax() 配合。
为什么不能直接在 repeat() 里用 var()？
浏览器解析 repeat() 时要求第一个参数是整数字面量（如 4），不是变量或表达式。哪怕你写了 --cols: 4;，repeat(var(--cols), 1fr) 会直接失效，退回到默认单列。
-
repeat()的第一个参数只支持数字字面量、auto-fit或auto-fill -
var(--cols)返回的是字符串"4"，不是可计算数值，CSS 引擎不把它当数字处理 - 想动态控列数，得换思路：用
minmax()+auto-fit，再靠calc()调节最小轨道宽度
如何用 calc() 动态算出每列最小宽度？
核心是让列宽下限随容器宽度和目标列数联动。比如“最多 6 列，每列至少 260px，间隙 20px”，就不能只写死 minmax(260px, 1fr)——它不管总列数上限。
- 先定义变量：
.grid { --grid-gap: 20px; --grid-min: 260px; --grid-max-cols: 6; } - 用
calc()算出“撑满容器所需的最小单列宽”：calc((100% - (var(--grid-gap) * (var(--grid-max-cols) - 1))) / var(--grid-max-cols)) - 把这个结果塞进
minmax()第一个参数：minmax(calc(...), 1fr) - 注意：现代浏览器支持
minmax(var(--x), 1fr)，但var(--x)必须是合法长度值（如260px），不能是纯数字
为什么变量要绑定到组件而非 :root？
全局变量污染真实存在。一个页面多个网格区域（主区、侧边栏、弹窗卡片墙）如果都读 :root 里的 --grid-gap，改一处全崩。
立即学习“前端免费学习笔记（深入）”；
- 把变量写在具体容器上：
.main-grid { --grid-gap: 20px; --grid-min: 260px; } - JS 更新时也针对该元素：
mainGridEl.style.setProperty('--grid-gap', '12px') -
:root只放真正跨项目复用的常量，比如主题色、基准字号，别塞布局参数 - 否则某天产品经理说“侧边栏卡片间距改成 12px”，你改了
:root，结果首页推荐流也缩窄了——没人想到那行代码
JS 动态更新变量时容易漏掉什么？
变量值变了，但 DOM 没触发重排，样式不会自动刷新。常见错误是只设变量，忘了触发 layout reflow。
- 设完变量后加一句
offsetHeight或getComputedStyle(el).width强制重排 - 更稳妥的做法：用
MutationObserver监听子元素数量变化，再同步更新--tab-count这类计数变量 - 别依赖
DOMContentLoaded一次性设置——动态增删 tab 项时，变量必须实时同步 - 示例：
tabs.length是数组长度，但document.querySelectorAll('.tab-item').length才是真实 DOM 数量，两者可能不等
实际生效的关键不在 :root 写得多漂亮，而在每个网格容器是否拥有独立、可响应、带单位的变量，并且这些变量被 calc() 正确引用进 minmax() 或 grid-template-rows 等能接受表达式的属性里。漏掉单位、错绑作用域、或指望浏览器自动推导 DOM 结构，都会让整个系统静默失效。
