CSS变量可控制grid列数，需在目标选择器内定义--columns-count并配合minmax(0,1fr)；gap变量须带单位、避免0值无呼吸感；JS修改需匹配作用域，嵌套网格应隔离变量名。
怎么用 CSS 变量控制 grid-template-columns 列数
直接在容器上定义 --columns-count 变量，再用 repeat(var(--columns-count), 1fr) 就能动态列数——但必须配合 minmax() 才不崩。纯 1fr 在窄屏下会把每列压到几像素宽，文字直接叠一起。
推荐写法：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))) 是自动的，而变量驱动的精确列数得这样：
.grid { --columns-count: 4; grid-template-columns: repeat(var(--columns-count), minmax(0, 1fr)); }- 变量必须定义在目标选择器内（比如
.grid），不能只挂:root后指望所有网格继承——作用域没对上，JS 改了也无效 - IE11 不支持
var()在grid-template-columns里，如需兼容，得加@supports (display: grid)包裹并 fallback 到 Flex
gap 能不能用 CSS 变量？哪些坑最容易踩
能，但 Safari 14.1 之前不认 gap: var(--g)，得拆成 grid-row-gap 和 grid-column-gap；而且变量值必须带单位，--g: 16 是错的，--g: 16px 才对。
更隐蔽的问题是：gap 为 0 时，子项真的紧贴，视觉上会拥挤。别指望“没间隙=紧凑”，实际需要子项自己加 padding 来维持呼吸感：
立即学习“前端免费学习笔记（深入）”；
.grid { gap: var(--g, 0); }.grid > * { padding: calc(var(--g, 0) / 2); }- 如果子项用了
box-sizing: border-box，这个padding会压缩内容区，得同步调min-width或加max-width保底线
JavaScript 动态改列数时，为什么 setProperty 没反应
常见原因是变量作用域和选择器没对齐。比如你在 :root 定义了 --columns-count，但网格容器是 .dashboard-grid，且没在该类里重声明变量，那 JS 执行 document.documentElement.style.setProperty('--columns-count', '5') 就不会影响它。
正确做法是让变量定义紧贴使用处：
.dashboard-grid { --columns-count: 3; grid-template-columns: repeat(var(--columns-count), minmax(0, 1fr)); }- JS 改时只操作这个元素：
document.querySelector('.dashboard-grid').style.setProperty('--columns-count', '5') - 避免在滚动或 resize 中高频调用，否则触发强制同步布局（layout thrashing）
嵌套网格的 gap 变量怎么不互相干扰
CSS 变量天然继承，但 gap 本身不继承——它只作用于直系子容器。所以嵌套时要靠作用域隔离变量名，而不是依赖继承。
比如外层卡片列表用大间距，内层标签组用小间距：
.card-list { --gap-outer: 24px; gap: var(--gap-outer); }.card-list .tag-grid { --gap-inner: 8px; gap: var(--gap-inner); }- 千万别写
!important在变量 fallback 里，var(--g, 8px !important)语法错误，直接失效
变量名重复、作用域没收口、单位漏写、gap 为 0 时忘了 padding——这四点只要漏一个，“动态”就变成“看运气”。
