css变量不能直接用于minmax()第一个参数，因规范要求该参数必须是可解析长度，var()不触发计算；正确做法是用变量定义静态最小宽度（如--card-min-width: 280px），列数由auto-fit自动计算，配合@container实现局部自适应，并确保卡片子元素不撑破网格。
为什么不能直接把CSS变量塞进 repeat() 里
你写 --col-min: 280px，再在 grid-template-columns 里用 repeat(auto-fit, minmax(var(--col-min), 1fr))，看起来很合理——但浏览器不认。CSS变量无法在 minmax() 的第一个参数中参与计算（哪怕只是个数值），它会被当成无效值，整条声明被丢弃。这不是兼容性问题，是规范限制：minmax() 要求两个参数都必须是可解析的长度或弹性值，而 var(--x) 在函数内部不触发计算。
正确做法：用变量控制最小宽度，但列数逻辑仍由 auto-fit 决定
真正能用变量的地方，是定义卡片内容可读性的底线，比如图文卡片的最小舒适宽度。这个值只影响 minmax() 的下限，不参与轨道数量运算。
-
--card-min-width: 280px是安全的变量用法，它只用于minmax()第一个参数，且值本身是静态长度 - 列数增减完全交给
auto-fit：容器宽 ÷--card-min-width的整数部分，就是实际生成的列数 - 若想动态调高门槛（比如横屏时放宽到 320px），得靠媒体查询覆盖变量，而不是指望 JS 或 calc 动态重算
repeat()
配合 @container 实现局部自适应才真正需要变量
当卡片嵌在侧边栏或弹窗这类“非视口级”容器里，全局断点会失灵。@container 可以让卡片只响应自己父容器的宽度变化，这时变量才有发挥空间：
- 给卡片外层加
container-type: inline-size - 用
@container (min-width: 600px)控制不同容器尺寸下的--card-min-width值 - 例如：
@container (min-width: 600px) { .card-grid { --card-min-width: 300px; } }，再在 grid 规则里引用minmax(var(--card-min-width), 1fr) - 注意：IE 和旧版 Safari 不支持
@container，需降级为媒体查询
容易忽略的细节：卡片内容必须“不撑破”网格
就算 minmax() 算对了列数，一张卡片内部图片没设 width: 100%、长文本没截断、或者嵌套 flex 没加 min-width: 0，都会导致该卡片高度突兀，破坏整体对齐。这不是变量的问题，而是子元素失控。
- 卡片本身加
min-width: 0（尤其内部有 flex 或文字流时） - 图片强制
width: 100%; height: auto; - 标题类文本加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 别依赖
gap来“修”内容溢出——它只管轨道间距，不管内容尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
