绝大多数情况应使用 auto-fit；auto-fit 会合并空轨道使剩余列等比拉伸，适合响应式列数变化，而 auto-fill 保留所有轨道留白，适用于需占位的布局场景。
auto-fit 和 auto-fill 到底用哪个
绝大多数人写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是对的，但搞混 auto-fit 和 auto-fill 会导致列“消失”或空白撑满。
-
auto-fit会把空余轨道合并（即收缩为 0 宽），让剩余列等比拉伸，适合“列数随容器变少，内容不丢”的场景 -
auto-fill会保留所有生成的轨道（哪怕没内容），留白仍在，适合需要占位、配合:nth-child布局的场合 - 浏览器兼容性一致（Chrome 66+/Firefox 63+/Safari 16.4+），但 Safari 16.3 及更早不支持
auto-fit在minmax()外单独使用——别写成repeat(auto-fit, 1fr)
minmax() 里两个参数为什么不能都写固定值
比如 minmax(200px, 200px) 看似稳妥，实际会让 auto-fit 失效：网格无法缩放，列数锁死，响应式就断了。
- 第一参数是“最小宽度”，必须可达成（如
250px或min-content） - 第二参数是“最大宽度”，
1fr表示“均分剩余空间”，max-content会按内容撑开（可能溢出） - 如果内容本身很窄（比如纯文字短标签），加
min-width: 0到子项，防止minmax()被内容宽度劫持
子元素 overflow 或 flex 引起的列宽计算异常
常见现象：明明设了 minmax(300px, 1fr)，但小屏下还是只显示一列，或者列宽远超预期。
- 子元素含
white-space: nowrap或未设overflow: hidden，会强制 grid 轨道拓宽以容纳内容 - 子项用了
display: flex且内部有flex: 1，可能触发隐式最小尺寸（min-width: auto），需显式覆盖为min-width: 0 - 图片未设
max-width: 100%、height: auto，同样会撑破列宽
媒体查询不是必须，但 fallback 得有
当目标浏览器不支持 auto-fit（比如旧版 Safari 或 IE），纯靠 Grid 响应式会直接退化为单列。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (display: grid)包裹 Grid 布局，再在外层加一套float或inline-block的降级规则 - 别依赖 JS 检测
auto-fit是否生效——它不抛错，只是静默退化为repeat(1, 1fr) - 真要 JS 控制，监听
resize并读取element.clientWidth+ 列宽阈值，比查 CSS 支持更可靠
minmax() 的“最小”会被内容顶开，auto-fit 的“自动”又不会报错——它只是默默不工作。 
