CSS变量无法控制repeat()列数，因规范强制要求首参为字面量数字；唯一安全方案是auto-fit+minmax()动态计算列数，或JS运行时设置。
CSS 变量不能直接控制 repeat() 的列数，这是浏览器解析层的硬性限制，不是写法或兼容性问题。你真正能安全、动态控制的，只有列宽阈值、间隙、行高这些参数。
为什么 repeat(var(--cols), 1fr) 总是静默失效
浏览器在解析 grid-template-columns 时，要求 repeat() 的第一个参数必须是字面量数字（如 3、12），不接受任何表达式——包括 var(--cols)、calc()、attr()，甚至 env()。即使 --cols: 3 已正确定义，该整条 CSS 规则也会被丢弃，开发者工具里显示为划掉（strikethrough），且无任何错误提示。
-
--cols: "3"或--cols: 3px同样失败：变量值必须是无单位纯数字，但即便满足，仍不被repeat()接受 - 这个限制存在于 Chrome、Firefox、Safari、Edge 所有现代浏览器，是 CSS Grid 规范本身禁止的，不是 bug
- 别浪费时间调试写法——它根本不可能工作
用 auto-fit + minmax() 替代固定列数
把控制焦点从“我要几列”转向“每列最小要多宽”，让浏览器根据容器尺寸自动计算列数。这是唯一能用 CSS 变量安全驱动的响应式栅格逻辑。
- 基础写法：
:root { --grid-min: 280px; --grid-gap: 1.2rem; }，配合grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr))); gap: var(--grid-gap); -
var(--grid-min)可被媒体查询覆盖，例如@media (min-width: 768px) { :root { --grid-min: 320px; } } - 避免用
em或rem作--grid-min值——字体缩放可能意外触发列数变化 -
auto-fit会收缩未填充的轨道，auto-fill则保留空轨道；当--grid-min偏大或容器尺寸临界时，二者行为差异会被放大
什么时候必须切到 JS 动态设置列数
当你明确需要「运行时固定 N 列」，比如 N 来自 URL 参数、用户偏好设置或 API 返回值，CSS 层面完全无解——auto-fit 是内容驱动的，不是指令驱动的。
- 读取变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()) || 1; - 写入样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;（注意：内联样式优先级高于 CSS 规则） - 高频更新场景（如
resize）必须加防抖；只建议在初始化、storage事件或自定义事件中触发 - 千万别在
scroll、input等连续触发事件里直接调用，重排开销会失控
grid-template-areas 和 grid-template 不能靠变量“动态”
grid-template-areas 必须是带引号的纯字符串，不支持任何变量插值；grid-template 是简写属性，混用变量会导致整条规则被忽略。所谓“动态区域”，本质是不同断点下提供完全不同的结构定义。
- 桌面端：
grid-template-areas: "header header" "nav main" "footer footer"; - 平板端：
@media (max-width: 1024px) { grid-template-areas: "header" "nav" "main" "footer"; } - 所有子元素的
grid-area值必须和当前生效的grid-template-areas中字符串**逐字符一致**，空格、大小写、点号都不能错 - IE11 完全不支持这些特性，但真正的问题往往不是“不支持”，而是降级逻辑缺失——比如没提供 float/flex 回退方案
最常被忽略的点是：你以为在用变量控制列数，其实只是在控制列宽下限；真正的列数始终由容器尺寸与内容共同决定。别试图绕过这个限制，接受它的边界，反而更容易写出稳定、可维护的栅格系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
