CSS变量不能直接用于grid-template简写，因其需同时处理行列尺寸与区域字符串，而grid-template-areas不支持变量插值；仅grid-template-columns和grid-template-rows可安全结合var()使用。
CSS变量改grid-template根本不起作用？不是变量写错了，是根本没用对地方。
为什么grid-template不能直接用CSS变量
grid-template是简写属性，它一次性声明grid-template-rows、grid-template-columns和grid-template-areas。浏览器不支持在其中混用CSS变量和字符串区域名——比如grid-template: "header" "main" / var(--cols)会直接失效，整条规则被忽略。
- 只有
grid-template-columns和grid-template-rows能安全接入var(--xxx)，因为它们只处理轨道尺寸 -
grid-template-areas必须是带引号的纯字符串，不接受变量插值（连calc()都不行） - 试图用
grid-template: var(--template)并把--template设为"a b" / 1fr 1fr，会被当成无效值丢弃
真正能动态控制的只有grid-template-columns和grid-template-rows
这两个属性支持repeat() + var()组合，是最轻量、最可控的响应式列数方案。
- 正确写法：
:root { --cols: 3; }+.grid { grid-template-columns: repeat(var(--cols), 1fr); } - 变量必须是无单位数字，
--cols: "3"或--cols: 3px都会让repeat()解析失败 - 配合
minmax()更实用：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))比纯var(--cols)更能适应内容宽度变化 - 如果坚持用变量控制列数，媒体查询里只需覆盖
--cols：@media (min-width: 768px) { :root { --cols: 4; } }
grid-template-areas想“动态”只能靠媒体查询重写整套结构
它没有中间态，要么全有，要么全无。所谓“动态”，本质是不同断点下提供完全不同的区域布局。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
grid-template-areas: "header header" "nav main" "footer footer"; - 平板端：
@media (max-width: 1024px) { grid-template-areas: "header" "nav" "main" "footer"; } - 手机端：
@media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; }（此时nav需加display: none或grid-area: .） - 所有子元素的
grid-area值必须和当前生效的grid-template-areas中字符串**逐字符一致**，空格、大小写、点号都不能错
容易被忽略的兼容性与调试细节
IE11 不支持 CSS 变量、auto-fit、minmax()，也不支持grid-template-areas。但问题往往不出在“不支持”，而出在降级逻辑缺失。
- 别只写
@supports (display: grid)，要包裹整个栅格规则，再在里面给flex回退 - 调试时打开开发者工具的“Computed”面板，直接看
grid-template-columns最终计算值，比猜更准 - 用
outline: 1px solid red临时套在网格容器上，能立刻暴露grid-template-areas是否按预期划分了区域 - 移动端真机测试时，
orientation媒体查询可能不触发——优先用max-height或min-width模拟横竖屏边界
