CSS变量不能直接控制repeat()列数，因repeat()首参须为字面量数字；真正可控的是minmax()中带单位的最小宽度（如--col-min: 280px），配合auto-fit实现响应式列数塌陷。
CSS变量不能直接控制repeat()的列数，所谓“列数塌陷”本质是误用导致的布局失效，不是变量本身的问题。
为什么repeat(var(--cols), 1fr)总是不生效
浏览器解析grid-template-columns时，repeat()第一个参数必须是字面量数字（如4），var(--cols)只是字符串替换，不会被求值为数字。所有现代浏览器（Chrome/Firefox/Safari/Edge）都会静默丢弃整条声明——DevTools里该行显示为删除线，但控制台无报错，极易误判为“写对了”。--cols: "3"、--cols: 3px、--cols: 3.0全都不行。
真正能用变量控制的“塌陷点”在minmax()里
列数“塌陷”其实是响应式行为：当容器变窄，列宽压到阈值以下时，浏览器自动减少列数。这个阈值可由变量安全驱动：
-
minmax()第一个参数支持var(--col-min)，前提是变量值是带单位的有效长度（如--col-min: 280px✅，--col-min: 280❌） - 搭配
auto-fit才能触发塌陷：grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr)) - 别用
em/rem作--col-min值——字体缩放可能意外触发换行 - 若需多套最小宽度（如卡片列表 vs 数据表格），用不同类名切换变量，而非一个变量配一堆媒体查询
JS动态改列数时，怎么避免塌陷后内容错位
纯靠JS拼style.gridTemplateColumns = `repeat(${n}, 1fr)`容易崩，尤其窄屏下：
立即学习“前端免费学习笔记（深入）”；
- 必须加
minmax()兜底：repeat(${n}, minmax(0, 1fr))，否则小屏会把每列压成几像素宽 - 显式声明
grid-auto-rows: minmax(40px, auto)，否则新增子项掉进隐式行轨道，内容少时视觉“消失” - 变量作用域要匹配：如果网格容器是
.grid，变量就得定义在.grid { --cols: 3; }里，而不是只挂:root - 高频更新（如
resize）必须防抖，Grid重排成本高于Flex
最容易被忽略的是：很多人以为“把变量塞进repeat()”是第一步，其实第一步是想清楚——你到底要的是“固定N列”，还是“容器窄了就自动少列”。前者必须JS，后者auto-fit + var(--col-min)一行搞定。
