CSS变量不能用于grid-template简写属性，仅grid-template-columns/rows支持var()；动态列数推荐repeat(auto-fit,minmax())；区域布局需媒体查询重写，变量集中定义+断点覆盖最易维护。
CSS变量能统一管理响应式栅格，但必须避开 grid-template 简写属性——它根本不认变量。
只对 grid-template-columns 和 grid-template-rows 用 var()
浏览器解析 grid-template 时，会把整条声明当做一个原子值处理。一旦里面混入 var(--cols) 或字符串区域名（比如 "header main"），整条规则直接被丢弃，连警告都不报。
-
grid-template-columns: repeat(var(--cols), 1fr)✅ 安全，只传数字 -
grid-template-rows: minmax(60px, auto) var(--rows)✅ 同理 -
grid-template: "header" "main" / var(--cols)❌ 失效，整行作废 -
--cols: "3"或--cols: 3px❌repeat()只接受无单位纯数字
列数动态控制：用 repeat(auto-fit, minmax()) 比硬编码变量更实用
靠 --cols 控制固定列数，在内容宽度变化频繁时反而僵硬。真正自适应的写法是绕过变量，直接用函数：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
- 不需要媒体查询就能根据容器宽度自动增减列数
- 避免了在多个断点里反复覆盖
--cols的维护成本 - IE11 不支持
auto-fit和minmax()，但现代项目通常已不需兼容 IE
区域布局（grid-template-areas）没法“变量化”，只能靠媒体查询重写
grid-template-areas 必须是带引号的静态字符串，calc()、var()、甚至空格微调都会让它失效。所谓“动态”，其实是不同断点下提供完全不同的结构：
- 桌面端：
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字符串**逐字符一致**，多一个空格或大小写错误就匹配失败
变量集中定义 + 断点覆盖是最可控的落地方式
把所有栅格参数收口到 :root，再用媒体查询按需覆盖，比散落各处的重复声明更易维护：
:root {
--grid-columns: 12;
--grid-gap: 16px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
}
@media (min-width: var(--breakpoint-md)) {
:root { --grid-columns: 8; }
}
.grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
容易被忽略的是：变量本身不触发重排，但它的值一旦被用于 repeat() 或 calc()，就会参与布局计算——所以别在 JS 里高频修改，也别指望它像 React state 那样自动响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
