不能在媒体查询里直接重写repeat(2, 1fr)，因其会覆盖auto-fit + minmax()的动态列数计算逻辑，导致宽度增加时仍卡死列数、内容高度不一时出现视觉错位；媒体查询应仅用于兜底或微调，如强制小屏单列、大屏限宽、gap重置等。
为什么不能在媒体查询里直接重写 repeat(2, 1fr)
因为这会和 auto-fit + minmax() 的连续计算逻辑冲突。比如容器宽 890px，minmax(300px, 1fr) 本可塞下 2 列（600 ≤ 890），但若你在 @media (min-width: 768px) 里硬写 repeat(2, 1fr)，那宽度涨到 910px 时仍卡死在 2 列——而它其实已够塞 3 列（900 ≤ 910）。更麻烦的是，内容高度不一时，固定列数会让某列被撑高，下一行起始错位，视觉上出现“阶梯”。
minmax() + auto-fit 是动态列数的主干
所有响应式列数变化应由这一组合承担，媒体查询只做兜底或微调：
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))作为默认值，它会在 320px 宽度下自动退为 1 列，768px 时大概率是 2 列，1200px 以上自然铺满 4–5 列 -
auto-fit比auto-fill更安全：空列会被收缩为 0，不会在小屏留下看不见的空白轨道 - IE11 不支持
auto-fit和minmax()，需用@supports not (display: grid)或@supports (grid-template-columns: repeat(auto-fit, 1fr)))包裹降级规则
何时该用 CSS 变量控制列宽下限
当你需要根据设备类型或用户偏好动态调整最小列宽（比如深色模式下加宽卡片、阅读模式下拉长单列），CSS 变量比媒体查询更灵活：
- 定义变量：
:root { --card-min-width: 280px; }，然后在 Grid 中使用minmax(var(--card-min-width), 1fr) - 在媒体查询中改变量值，而非重写整个
grid-template-columns：@media (max-width: 480px) { :root { --card-min-width: 100%; } } - 避免在 JS 中频繁 setProperty 修改该变量——触发重排成本高；更适合一次性初始化，比如根据
prefers-reduced-motion或用户设置开关
媒体查询真正该管的三件事
它不是列数控制器，而是边界守门员：
- 小屏强制单列：
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }，防止auto-fit在极窄屏下还试图塞半列 - 大屏限宽防文字过长：
@media (min-width: 1200px) { .card-grid { max-width: 1400px; margin: 0 auto; } } - 间距与内边距微调：
gap必须随断点重置，比如桌面用gap: 1.5rem，手机改gap: 1rem；否则 24px 的间隙在 375px 屏上可能直接撑出横向滚动条
最常被忽略的是：每个媒体查询块里，grid-template-columns 和 gap 必须成对出现，且子项不能有 margin —— 那会和 gap 叠加，导致列数计算失准或空白轨道意外出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
