var(--columns)不能裸用，因为未定义时grid-template-columns会直接失效退化为单列，而非忽略变量；必须用var(--columns, 1fr)兜底，且变量需在目标选择器内定义，搭配minmax()防窄屏塌陷。
直接用 --columns 变量配 grid-template-columns: var(--columns) 就能免写 class、免 JS、免媒体查询，但必须设 fallback 且注意作用域——否则页面一缩就崩。
为什么 var(--columns) 不能裸用？
CSS 变量未定义时，grid-template-columns 会直接失效（退化为单列），而不是“忽略变量继续解析”。浏览器不会报错，但布局全乱。
-
grid-template-columns: var(--columns, 1fr)是基础兜底，但仅适用于单值 fallback - 想默认双列？得用两个变量：
style="--columns: 1fr 1fr; --fallback: 1fr 1fr"，再写grid-template-columns: var(--columns, var(--fallback)) - 空字符串
""、unset或0都不会触发 fallback，别试
repeat(var(--columns-count), ...) 怎么不压扁内容？
纯 1fr 在窄屏下会让每列缩到几像素宽，文字叠在一起。关键不是变量本身，而是轨道函数没加约束。
- 必须搭配
minmax()：写成repeat(var(--columns-count), minmax(0, 1fr)) - 更安全的写法是
minmax(240px, 1fr)，避免列宽低于阅读底线 - 变量必须定义在目标选择器内（如
.grid），不能只挂:root后指望继承——作用域不对，JS 改了也无效
gap 能用变量吗？Safari 和 padding 怎么搞？
能，但 Safari 14.1 之前不支持 gap: var(--g)，且变量值必须带单位。
立即学习“前端免费学习笔记（深入）”；
-
--g: 16px✅，--g: 16❌（无单位直接失效） - 旧 Safari 需拆开：
grid-row-gap: var(--g); grid-column-gap: var(--g) -
gap: 0会让子项真·紧贴，视觉窒息；建议用padding: calc(var(--g, 0) / 2)给子项自己撑开呼吸感 - 若子项用了
box-sizing: border-box，这个 padding 会压缩内容区，需同步加min-width: 0防塌
嵌套网格里变量怎么不串？
CSS 变量天然继承，但 gap 本身不继承——问题出在命名冲突，不是作用域漏了。
- 嵌套时别复用
--g或--columns，改用--inner-gap、--sub-columns等隔离名 - 父容器
gap影响的是它的直系子项，子网格的gap只影响它自己的子项，二者互不干扰 - 真正容易踩的是：JS 动态修改时高频调用
setProperty，尤其在scroll或resize里，会触发 layout thrashing
最易被忽略的是响应式切换时的 fallback 安全性——比如移动端切单列，--columns 设成 1fr 没问题，但若同时依赖 --g 控制间距，而该变量在某一层没定义，整个网格的 gap 就会消失，且毫无提示。
