只有 grid-template-columns 和 grid-template-rows 真正支持 var()，因其仅处理尺寸值，而 grid-template-areas、grid-row、grid-column 等不支持；使用时需确保变量带单位且作用域正确。
能，但仅限 grid-template-columns 和 grid-template-rows 两个属性，且必须配合 minmax()、repeat() 或 calc() 使用；其他如 grid-template-areas 完全不支持变量插值。
哪些 Grid 属性真正支持 var()？
只有 grid-template-columns 和 grid-template-rows 能安全接入 var(--x)。原因在于它们只处理尺寸值（长度、fr、auto 等），而浏览器解析器能将变量展开为合法轨道定义。
-
grid-template-areas必须是带引号的纯字符串（如"a b c"），传var(--areas)会被直接视为无效值丢弃 -
grid-auto-flow、grid-row、grid-column等定位类属性不接受变量，写grid-column: var(--start)会静默失败 -
gap在 Safari 14.1 之前不支持var()，需拆成grid-row-gap和grid-column-gap
minmax(var(--min), 1fr) 不生效的常见原因
不是语法错，而是变量值或作用域出问题：
-
--min值缺少单位：设成--min: 260或--min: "260px"都无效，必须是--min: 260px - 变量未在当前选择器作用域内定义：比如在
:root设了--min，但网格容器用的是.card-grid类且没重声明，实际读到空值 -
calc()中混入无单位变量：例如calc(100% - var(--gap))，若--gap: 20（缺px），整个calc失效，连带minmax()退化
如何让列数和列宽都变成可配置变量？
需要两个独立变量，并注意语义互斥：
立即学习“前端免费学习笔记（深入）”；
- 列数变量必须是纯数字：
--cols: 4，然后写repeat(var(--cols), minmax(var(--min), 1fr)) - 列宽下限变量必须带单位：
--min: 260px，不能是260或"260px" - 禁止把
var(--cols)和auto-fit混用：repeat(auto-fit, minmax(...))是浏览器自动协商列数，与固定列数逻辑冲突 - 小屏防塌缩需算最大宽：
minmax(var(--min), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)))，其中--gap: 20px必须带单位
真正难的不是写出这一行 CSS，而是让每个变量在媒体查询切换、JS 动态更新、嵌套组件共用时始终持有合法值——尤其当多个网格共享同名变量，!important 和继承链容易互相覆盖，建议用类名前缀隔离，比如 .dashboard-grid--main { --min: 260px; }。
