只有用css变量+minmax()+auto-fit才能实现真动态列数响应；repeat()中不能直接用var(--cols)，因纯1fr无下限，需minmax(240px,1fr)设最小宽度；变量须定义在网格容器内，calc()运算符两侧需空格和单位，gap变量值必须带单位。
直接改 grid-template-columns 值或靠媒体查询硬写断点，不是真动态——只有用 CSS 变量 + minmax() + auto-fit 才能实现容器宽度一变、列数自动响应的效果。
为什么不能直接在 repeat() 里写 var(--cols)？
因为 repeat(var(--cols), 1fr) 在窄屏下会把每列压到几像素宽，文字叠成一团；纯 1fr 没有下限约束，浏览器不会“拒绝渲染过窄的列”，只会照常分配空间。必须包裹 minmax() 来设底线。
-
minmax(0, 1fr)是兜底写法，但 0 容易触发内容溢出，实际应设合理最小值（如240px） -
minmax(240px, 1fr)✅ 真正生效：列宽 ≥ 240px，富余空间由1fr均分 - 变量必须定义在网格容器选择器内，比如
.grid { --grid-min: 240px; }，而不是只挂:root后指望继承——作用域不对，JS 改了也无效
calc() 和变量混用时整列消失？检查这三处
calc() 在 grid-template-columns 中极其脆弱，一个空格或单位缺失，整条声明就静默降级为 auto 或 0px，对应列直接塌陷不可见。
-
calc(100% - 200px)✅ 合法：运算符两侧都有单位，括号完整 -
calc(100%-200px)❌ 失效：减号前后缺空格，部分浏览器直接忽略整条声明 -
calc(100% - 2rem - 10)❌ 崩溃：末尾10无单位，加减运算不接受纯数字 - 想让“左侧最小 300px，右侧固定 240px”，别写
300px 240px，而要用minmax(300px, calc(100% - 240px)) 240px
如何让列数“平滑变化”，而不是跳变？
产品经理要的是“屏幕从 1200px 缩到 1199px 不突然少一列”，这靠 auto-fit + minmax() 配合变量就能做到，无需 JS 或断点。
- 写法：
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr))); -
auto-fit会合并空轨道，让现有列拉伸填满容器；auto-fill则强行留白，列数不变但中间空隙大 - 变量值建议用
px或rem，避免用em——字体缩放可能意外触发换行 - 如果需要更精细控制（比如“最多 6 列”），就得配合
@supports或 JS 动态设变量，纯 CSS 无法表达“最大列数”语义
gap 用变量时最常踩的坑
gap 支持变量，但 Safari 14.1 之前不认 gap: var(--g)，得拆成 grid-row-gap 和 grid-column-gap。
- 变量值必须带单位：
--g: 16px✅，--g: 16❌（浏览器忽略整条gap声明） -
gap: 0会让子项真正紧贴，视觉拥挤。正确做法是：.grid > * { padding: calc(var(--g, 0) / 2); } - 如果子项用了
box-sizing: border-box，这个padding会压缩内容区，得同步加min-width: 0或设max-width防撑破
真正难的不是写对语法，而是理解变量在哪一级作用域生效、minmax() 的两个参数谁决定“最小”谁决定“弹性上限”、以及 auto-fit 和 auto-fill 在空轨道处理上的根本差异——这些细节错一点，布局就全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
