直接用 repeat(auto-fit, minmax()) 不够，因列宽下限和间距等值常变动，硬编码导致维护困难；CSS变量是统一管控可变参数的必要手段，--grid-min-item 和 --grid-gap 必须定义在 :root 以支持媒体查询动态重算，且变量值须自带单位；子元素需收敛（如图片 max-width:100%、flex 容器 min-width:0），否则响应式失效；媒体查询应覆盖变量而非重写 grid-template-columns，确保维护性与一致性。
为什么直接用 repeat(auto-fit, minmax()) 还不够？
因为列宽下限、间距、容器内边距这些值，往往在不同项目或主题中频繁变动。硬编码 minmax(250px, 1fr) 或 gap: 16px 会导致改一处就得全局搜替换，还容易漏掉子项里的 max-width 或 min-width: 0。CSS 变量不是锦上添花，而是把「可变参数」从样式规则里抽出来统一管控的必要手段。
--grid-min-item 和 --grid-gap 必须设为根变量
这两个变量控制响应式行为的核心节奏，必须定义在 :root，否则媒体查询切换时无法动态重算：
:root {
--grid-min-item: 280px;
--grid-gap: 1.25rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-item), 1fr));
gap: var(--grid-gap);
padding: var(--grid-gap);
}
注意：minmax() 内部不能直接写 var(--grid-min-item) 后跟单位（如 px），必须确保变量值自带单位（比如 280px 而非 280），否则计算会静默失败，列数卡死。
子元素不收敛，变量再灵活也白搭
这是最常被忽略的环节——Grid 容器的响应式逻辑依赖子项「不撑破轨道」。即使你把 --grid-min-item 改成 200px，如果卡片里有图片没设 max-width: 100%，或者文字块用了 white-space: nowrap，浏览器仍会按内容固有宽度计算轨道，auto-fit 就退化成单列。
立即学习“前端免费学习笔记（深入）”；
- 所有卡片内图片必须加
max-width: 100%; height: auto; - 含 flex 布局的卡片头部/底部，父容器要加
min-width: 0;（防止 flex item 默认min-width: auto劫持） - 长文本容器建议加
overflow-wrap: break-word; min-width: 0; - 避免上层容器设
white-space: nowrap或未设width: 100%，否则 Grid 容器实际宽度异常
配合媒体查询做变量覆盖，比重写整条 grid-template-columns 更安全
当需要在小屏强制单列，但又不想破坏变量体系时，别去改 grid-template-columns，直接覆盖变量值：
@media (max-width: 480px) {
:root {
--grid-min-item: 100%;
--grid-gap: 0.75rem;
}
}
这样既保持 CSS 变量链完整，又能利用浏览器对 var() 的实时重计算能力。比起在媒体查询里重复写 repeat(1, 1fr)，它更易维护，且不会因遗漏某处 gap 或 padding 导致视觉错位。
真正难的不是写出 auto-fit，而是让每个子元素都「守规矩」——变量只是开关，收敛才是底线。
