minmax()中不能直接使用css变量，因其首参必须为可解析长度值；变量仅能作为静态值占位符，响应逻辑由auto-fit与容器尺寸共同决定。
为什么直接在 minmax() 里用 var(--min-width) 会失效
浏览器会静默丢弃整条 grid-template-columns 声明，不是报错，而是根本不起作用。因为 CSS 规范明确要求 minmax() 的第一个参数必须是可解析的长度值（如 280px、10em），而 var(--x) 在函数内部不参与计算，它只是个未求值的符号引用。
常见错误写法：repeat(auto-fit, minmax(var(--card-min), 1fr)) —— 看起来很直观，但实际无效。
- 不要试图用
calc(var(--card-min) + 0px)绕过，同样不生效 - 也不要指望 JS 动态改
style.setProperty后立刻重算列数，minmax()的轨道生成逻辑在样式计算阶段就锁死了 - 真正能被变量影响的，只有
minmax()的下限值本身，且它必须是静态长度
--card-min-width 变量该定义在哪、怎么覆盖
变量要定义在有作用域控制能力的地方：要么是全局 :root，要么是卡片容器的 class 上，配合 @container 使用。媒体查询只能覆盖 :root，对嵌套在侧边栏或弹窗里的卡片无效。
- 全局基础值：
:root { --card-min-width: 280px; } - 横屏放宽：
@media (min-width: 1024px) { :root { --card-min-width: 320px; } } - 局部自适应（推荐）：
.card-grid { container-type: inline-size; }，再写@container (min-width: 600px) { .card-grid { --card-min-width: 300px; } } - IE / 旧 Safari 不支持
@container，必须降级为媒体查询，不能省略
卡片内容“撑破网格”的真实原因和修复点
就算 minmax() 算对了列数，卡片高度参差不齐、错行、间距崩坏，大概率不是变量问题，而是子元素失控。
- 卡片自身没设
min-width: 0，内部 flex 或文字流会强制撑宽 - 图片没加
width: 100%; height: auto;，原始尺寸突破网格约束 - 长文本没截断：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;缺一不可 - 别依赖
gap来“补救”溢出——它只管轨道间距，不管内容尺寸
Grid 布局中 auto-fit 和 auto-fill 的实际差异
两者都用于动态生成列，但行为不同：auto-fit 会合并空轨道，auto-fill 则保留所有生成的轨道（即使没内容）。对卡片布局来说，auto-fit 是更自然的选择。
- 用
auto-fit：容器宽 ÷--card-min-width的整数部分 = 实际列数，空列自动收缩 - 用
auto-fill：哪怕只放一张卡，也会按最小宽度铺满整行，容易造成空白浪费 - 示例有效写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));，其中280px是静态值，变量仅用于维护这个值的来源
auto-fit 和容器尺寸共同决定。最容易被忽略的是——你改了变量，却忘了同步检查卡片内部是否还守规矩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
