内联 CSS 变量 --columns 配合 grid-template-columns: var(--columns) 是最轻量易维护的网格方案；它避免 class 膨胀，支持 HTML 层配置、JS 动态修改和 SSR 插值，需设 fallback 如 var(--columns, 1fr)，注意空格分隔单位及命名规范。
直接用内联 --columns 变量配合 grid-template-columns: var(--columns)，就能在不写额外 CSS 的前提下动态切换列数、宽度和比例——这是目前最轻量、最易维护的网格方案。
为什么不用 class 控制列数？
写死 .grid-3、.grid-4 这类 class 会快速膨胀：每新增一种布局就要加一个 class，还要同步维护 CSS 文件。而内联变量把配置逻辑收束到 HTML 层，改列数只需改一个属性值，连 JS 都不用动。
- HTML 中直接写
<div class="grid" style="--columns: 1fr 1fr 1fr">，三列等宽立刻生效 - 响应式时可结合 JS 动态设置：
el.style.setProperty('--columns', '1fr')切换单列 - 服务端渲染或模板引擎里插值也极自然：
style="--columns: {{ $cols }}"
var(--columns) 的 fallback 机制怎么用？
如果 --columns 没定义，grid-template-columns 会失效（变成默认单列），页面直接崩。必须设回退值，但注意：CSS 不支持 var(--columns, 1fr) 这种写法来兜底整个声明——它只对单个值有效。
- 正确做法是定义一个基础 fallback：在 CSS 中写
.grid { grid-template-columns: var(--columns, 1fr); } - 如果需要多列 fallback（比如默认双列），得用两个变量：
style="--columns: 1fr 1fr; --fallback: 1fr 1fr"，然后 CSS 写grid-template-columns: var(--columns, var(--fallback)) - 别用空字符串或
unset当 fallback，它们不会触发回退逻辑
如何安全混用 fr、px 和 %？
内联变量里拼接单位完全合法，但要注意浏览器解析顺序和空格敏感性——--columns: 200px1fr 会被当成一个非法值，必须保留空格。
立即学习“前端免费学习笔记（深入）”；
- 写成
style="--columns: 200px 1fr 2fr"才有效，中间空格不可省略 -
%单位要小心父容器宽度是否已知，否则可能表现异常；fr更可靠，尤其搭配minmax() - 想让某列最小 200px、最大占满剩余空间？用
style="--columns: minmax(200px, 1fr) 1fr"，无需额外 media query
真正难的不是语法，而是约束变量命名和取值范围——比如统一用 --gap 控制间距、所有 --columns 值都由构建脚本生成而非手写，否则很快就会出现 --columns: 1fr 1fr 和 --columns: 1fr 1fr （末尾多空格）这种静默失效问题。
