grid-template-areas 不支持 CSS 变量拼接，必须预定义完整字符串，否则整条声明被静默丢弃；正确做法是为不同主题单独定义等长、大小写敏感、无不可见空格的区域字符串。
grid-template-areas 不能用 CSS 变量拼接，必须预定义完整字符串
浏览器压根不解析 grid-template-areas: "header header" var(--footer-row) 这类写法，整条声明会被静默丢弃，布局退化为普通流。你看到的“没生效”，其实是它根本没被识别。
正确做法是为每个主题单独写出完整、等长的字符串：
.theme-light { grid-template-areas: "header header" "nav main" "footer footer"; }.theme-dark { grid-template-areas: "header header" "main nav" "footer footer"; }
注意：每行区域名数量必须一致（比如都是 2 个），大小写敏感（Header ≠ header），复制时容易混入不可见 Unicode 空格（如 \u2028），导致整条失效。
grid-template-columns 可以用 var()，但 calc() 里不能套 var()
grid-template-columns: var(--cols, 1fr 2fr 1fr) 是安全的；但 grid-template-columns: calc(var(--cols)) 会直接报错或忽略——CSS 解析器不进 calc 内部找变量。
立即学习“前端免费学习笔记（深入）”；
关键细节：
- 默认值不能省，
var(--cols)没第二参数时，变量未定义会导致布局崩溃 - 列数剧烈变化（如 4 列 → 1 列）时，
repeat(auto-fit, minmax())无法靠变量驱动，得换显式定义：--cols: 1fr;或--cols: 1fr 2fr 1fr; - 建议加双引号：
var(--cols, "1fr 2fr 1fr")，某些浏览器对无引号默认值解析不稳定
切换类名时，重排抖动比你想的更严重
改 grid-template-areas 或 grid-template-columns 会触发 layout，不是 repaint，性能开销高得多。光切类名不够，还得三步防护：
- 给 grid 容器设
min-height: 0，尤其父级也是display: grid时，否则1fr行高会继承父容器高度，内容溢出 - 切换前先读一次：
getComputedStyle(el).gridTemplateColumns，强制 Chrome 触发重排，避免样式延迟应用 - 绝对不要在
requestAnimationFrame里高频改 grid 布局属性，动画帧只适合改opacity、transform这类合成属性
最易被忽略的是空格、引号和 minmax(0, 1fr)
空格问题比想象中致命：--areas: "header header" "nav main" 中若多一个换行或全角空格，整条声明静默失效；minmax(0, 1fr) 比纯 1fr 更稳，能防止容器高度继承异常导致内容撑破布局。
主题切换本质是批量更新 CSS 自定义属性 + 类名切换，不是 JS 拼字符串塞进 style.gridTemplateAreas——Safari 旧版和 SSR 首屏都会错位，这条路已被验证不可靠。
