repeat(var(--cols), 1fr)在小屏会塌陷，因fr无最小宽度约束；应改用repeat(calc(var(--cols, 3)), minmax(0, 1fr))并确保--cols为无单位数字、作用域正确。
直接用 grid-template-columns 配合 repeat() 和 CSS 变量就能动态列数，不需要 JS；但变量值必须是纯数字、不能带引号，且必须搭配 minmax() 或单位处理，否则窄屏下会崩。
为什么 repeat(var(--cols), 1fr) 在小屏上会塌陷
纯 1fr 没有最小宽度约束，当容器变窄时，浏览器会把每列压缩到接近 0px（比如文字撑不开、图片被压扁）。这不是 bug，而是 fr 单位的默认行为——它只管“剩余空间均分”，不保底。
- 必须加
minmax(0, 1fr)：第一个参数0允许收缩到内容最小宽度，第二个参数1fr保证均分剩余空间 - 写成
repeat(var(--cols), minmax(0, 1fr))才真正安全 - 如果列内有固定宽元素（如图片、按钮），还得额外加
min-width: 0到子项，防止 flex/grid 项强行撑开容器
--cols 变量怎么设才不会被浏览器忽略
CSS 变量解析失败时，整条 grid-template-columns 声明会被静默丢弃，页面退化为块级流式布局——你可能只看到一列堆叠，却找不到报错。
- 变量值必须是无单位数字：
--cols: 3✅，--cols: "3"❌（字符串会被当成无效值） - 必须提供默认值或在 :root / 父选择器中预定义，否则未声明时
var(--cols)返回空，导致解析失败 - 推荐写法：
grid-template-columns: repeat(calc(var(--cols, 3)), minmax(0, 1fr));，calc()能兜底并避免部分旧版 Chromium 的解析异常
Flex 与 Grid 变量如何协同控制同一套栅格系统
Grid 控制整体列结构，Flex 处理子项内部排列，两者变量名不能混用。比如你用 --grid-cols 控制外层 Grid 列数，就别在内层 Flex 容器里也用同名变量去算 flex-basis，否则媒体查询切换时容易冲突。
- 外层 Grid 容器：定义
--grid-cols+grid-template-columns: repeat(...) - 内层卡片列表（Flex）：改用
--flex-item-count+flex-basis: calc((100% - (var(--flex-item-count) - 1) * var(--gap)) / var(--flex-item-count)) - 所有
gap变量必须带单位：--gap: 16px，不能写--gap: 16，否则计算时单位缺失会失效
真正容易被忽略的是作用域和 fallback 的组合使用：变量没生效往往不是语法错，而是它根本没被继承到目标选择器里，或者 var(--x, 2) 的 fallback 写成了字符串。多用 DevTools 的 Computed 面板点开 grid-template-columns，看最终解析值是不是你预期的函数调用结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
