绝大多数情况下应使用 auto-fit，因其会合并空轨道使剩余列均分容器宽度；auto-fill 则保留所有列轨道导致小屏下出现空白占位。
auto-fit 和 auto-fill 到底该用哪个
绝大多数人写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是对的，但选错就卡在“列不收缩”或“空列占位”上。关键区别不在名字，而在浏览器怎么处理剩余空间：auto-fit 会合并空轨道，auto-fill 会保留所有生成的列轨道（哪怕没内容）。实际做响应式卡片列表时，必须用 auto-fit，否则小屏下会出现大量空白列。
- 用
auto-fit：空列直接塌缩，剩余列均分容器宽度 - 用
auto-fill：所有列轨道都保留，哪怕内容只填了前两格，后面全是透明“占位符” - 调试时可临时加
border: 1px solid red看轨道是否真实存在
minmax() 里的两个值为什么不能随便调换
minmax(300px, 1fr) 不是“最小300、最大1fr”，而是“单列宽度在 300px 到 1fr 之间弹性伸缩”。如果写成 minmax(1fr, 300px)，浏览器直接忽略整条声明——因为最小值不能大于最大值。更隐蔽的问题是：当容器总宽小于所有“最小值”之和时，1fr 失效，网格会强制滚动或溢出。
- 移动端窄屏下，若设
minmax(250px, 1fr)且容器只有 200px 宽，列会突破容器（除非加overflow: hidden） - 稳妥做法是把最小值设为可接受的最小内容宽度，比如卡片内图片最小能压到
200px，那就用minmax(200px, 1fr) - 别用
minmax(0, 1fr)试图“让列无限压缩”——0 不被规范支持，多数浏览器当无效处理
Grid 响应式失效的三个典型场景
写了 auto-fit 和 minmax 还不生效？大概率掉进这三类坑里。Grid 的响应行为依赖父容器有明确宽度，而很多布局里这个前提被悄悄破坏。
- 父容器是
display: inline-block或未设width的 flex 项：Grid 计算可用宽度时取的是内容宽度，不是视口宽度 - 卡片子元素用了
float或position: absolute：脱离文档流后，Grid 轨道高度无法自动撑开，视觉上“列错位” - 忘了重置默认 margin：比如
h3在卡片里自带上下边距，导致行高不一致，看起来像列没对齐
兼容性与 fallback 方案怎么写才不累
Edge 16+、Chrome 57+、Firefox 52+ 都支持 auto-fit，但 iOS Safari 10.3–12.1 有渲染抖动，Safari 13+ 才稳定。真要兼容 iOS 11/12，别写复杂 fallback，直接用媒体查询降级为 display: flex 更可控。
立即学习“前端免费学习笔记（深入）”；
- 不要试图用
@supports (display: grid)包裹整个 Grid 声明——Safari 12 对@supports解析有 Bug - 降级时用
flex-wrap: wrap+flex-basis: calc(33.333% - 1rem)，数值和 Grid 的列数对应即可 - 如果项目已用 PostCSS，
postcss-grid-kiss这类插件反而增加构建负担，不如手写两套简单规则
真正麻烦的不是写对那行 repeat(auto-fit, minmax(...))，而是父容器宽度来源是否干净、子元素是否老老实实呆在格子里。很多时候改一行 CSS 没用，得往上去翻三层祖先元素的 display 和 width 设置。
