auto-fit 会合并空列使现有列伸展占满容器，auto-fill 则预留所有可能轨道空间；minmax最大值不支持auto，须用fr或max-content；换行需显式设置grid-auto-flow: row wrap。
auto-fill 和 auto-fit 的区别到底在哪
很多人写 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 发现列数没按预期撑满容器，其实是把 auto-fill 和 auto-fit 混用了。前者会**预留所有可能的轨道空间**（哪怕没内容），后者才真正“压缩空列”。实际做响应式网格时，90% 场景该用 auto-fit。
-
auto-fill：浏览器先算出最多能放几列（比如容器宽 850px → 最多 4 列），然后不管有没有子元素，都生成 4 条列轨道 -
auto-fit：同样算出最多 4 列，但若只有 2 个子元素，就只渲染这 2 列，剩余轨道被合并，让现有列伸展占满 - 两者在
minmax()中行为一致，差异只体现在“空轨道是否保留”
minmax(200px, 1fr) 为什么不能写成 minmax(200px, auto)
minmax(200px, auto) 是无效写法——auto 在 minmax() 的最大值位置不被支持。CSS Grid 规范里，max 参数只接受长度、百分比、fr 单位或 max-content/min-content 这类关键字。
- 想让列宽随内容自适应？用
minmax(200px, max-content)，但要注意：一旦某列内容超宽，整行都会被撑开 - 要等比拉伸填满容器？必须用
1fr，它是唯一能参与剩余空间分配的弹性单位 -
minmax(200px, 1fr)的真实含义是：“每列至少 200px，多余空间由所有列平分”，不是“上限 1fr”
内容自动换行需要配合 grid-auto-flow
仅靠 repeat(auto-fit, minmax(...)) 只控制列数，不保证内容“换行”。如果子元素数量超过单行容量，它们默认会溢出容器右侧。必须显式设置 grid-auto-flow: row wrap（虽然 row 是默认值，但 wrap 不是）。
- 缺省时
grid-auto-flow: row→ 子项强行塞进单行，溢出也不换 - 正确写法：
grid-auto-flow: row wrap或简写为grid-auto-flow: dense（慎用，会重排顺序） - 如果列宽固定且内容高度差异大，换行后可能出现空白间隙，这时需加
grid-auto-rows: minmax(100px, auto)控制行高基线
移动端适配时 minmax 的最小值别硬写死
写成 minmax(300px, 1fr) 在手机上大概率导致单列独占、大量留白。更稳妥的是用相对单位或媒体查询兜底：
立即学习“前端免费学习笔记（深入）”；
- 用
minmax(min(300px, 100%), 1fr)：取 300px 和容器宽中较小者作为最小宽度 - 或直接
minmax( clamp(250px, 50vw, 300px), 1fr )，让最小宽度在视口变化时平滑过渡 - 真要兼容老设备？
auto-fill在 Safari 10.1+ 才稳定，iOS 14.5 之前对clamp()支持不全，得降级到媒体查询
最常被忽略的一点：Grid 换行依赖于父容器有明确宽度（哪怕是 100%），如果父容器本身 width 为 auto 且没有块级约束，minmax 的计算会失效——此时先检查外层盒子的尺寸来源。
