auto-fit比auto-fill更适合卡片布局，因其会合并空轨道使现有卡片均分整行空间，而auto-fill强制生成所有可能列轨道导致内容少时右侧留白或横向滚动；minmax()第一参数须为固定长度且不超容器，第二参数仅支持1fr或max-content。
直接用 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) 就能实现列数随容器宽度自动增减，无需媒体查询——但写错一个参数，它就退化成固定列或横向滚动条。
为什么 auto-fit 比 auto-fill 更适合卡片类布局
auto-fit 会把空轨道合并掉，让现有子项拉伸填满整行；auto-fill 则不管有没有内容，都按最小宽度硬塞满所有可能的列，容易在内容少时右侧留白甚至触发横向滚动。
- 内容只有 2 张卡片，容器宽 800px、
minmax(200px, 1fr)：auto-fit→ 生成 2 列，每列占1fr（即各 400px）auto-fill→ 理论可放 4 列，实际生成 4 个轨道，后 2 个为空，右侧留白 400px - 拖拽布局、日历等需要“预留槽位”的场景才选
auto-fill - Chrome DevTools 的 Layout 面板里勾选 “Show line numbers”，能一眼看出空轨道是否被折叠
minmax() 两个参数怎么设才不翻车
minmax() 不是“最小宽度 / 最大宽度”，而是“轨道最小可取值 / 单个轨道能拿到的最大份额”。写错会导致列宽失控或浏览器静默降级。
- 第一个参数必须是
auto或em（字体缩放会干扰列数计算） - 第二个参数只接受
1fr或max-content，写成2fr或minmax(200px, 2fr)是无效的，浏览器会当没写 - 想兼顾窄屏比例和大屏空间？用
minmax(clamp(160px, 25vw, 300px), 1fr)替代固定最小值 - 小屏下没变列数？检查第一个参数是否太大，比如
minmax(300px, 1fr)在 320px 宽屏幕连一列都塞不下，浏览器只能 fallback 成单列堆叠
子项样式踩坑：为什么网格看起来“没生效”
写了 repeat(auto-fit, minmax(...)) 却还是单列、错位、撑破容器——大概率不是 Grid 写错了，而是子项自己搞破坏。
- 子项设了
width: 200px或flex: 0 0 200px：会覆盖 Grid 的弹性分配，导致换行异常或溢出 - 父容器没加
display: grid：整个规则直接被忽略 - 子项用了
float、position: absolute或display: inline-block：脱离文档流，Grid 定位完全失效 - 忘了加
gap却用margin控制间距：margin 会塌陷，gap 才是 Grid 原生安全间距
真正难的不是写出那行 repeat(auto-fit, minmax())，而是确保它运行在干净的上下文中——子项没抢控制权，父容器没漏声明，最小宽度没被字体单位绑架。安卓某些 WebView 对 auto-fit 支持不全，上线前记得用 @supports not (grid-template-columns: repeat(auto-fit, )) 做降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
