auto-fit更常用，它收缩空列使内容拉伸填满；auto-fill保留所有可能轨道（含空列），易致留白或横向滚动；响应式栅格90%场景应选auto-fit。
repeat() 里用 auto-fit 还是 auto-fill？区别在哪
直接说结论：auto-fit 更常用，它会收缩空列、合并空白轨道；auto-fill 则保留所有生成的列轨道（哪怕没内容），容易导致意外留白或滚动条。实际做响应式栅格时，90% 场景该选 auto-fit。
比如写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，容器宽度缩小时，列数自动减少，剩余空间由现有列均分；而 auto-fill 会坚持铺满所有可能列，哪怕每列都空着。
常见错误现象：加了 auto-fill 后页面横向滚动、卡片间出现巨大间隙——八成是这个原因。
minmax() 的两个参数怎么设才不翻车
minmax() 第一个参数是列最小宽度，第二个是最大宽度，但“最大”不是固定值，而是参与 1fr 分配的弹性上限。设错会导致列不收缩、换行失效或在小屏上溢出。
实操建议：
- 最小值别设太小（如
100px），否则窄屏下文字挤成一团；推荐从240px或280px起手，兼顾移动端阅读和留白 - 最大值慎用
1fr以外的值（如300px）——它会让列拒绝拉伸，大屏下留白严重 - 如果要限制单列最大宽度，改用
minmax(240px, min(300px, 1fr))，兼容性稍低但更可控
为什么加了 repeat 却不换行？检查 grid-auto-flow
CSS Grid 默认行为是按行优先填满，但如果你发现子元素全堆在第一行、超出容器也不折行，大概率是 grid-auto-flow 没设对。
默认值是 row，它只在行内分配轨道；要让 Grid 自动创建新行容纳多余子项，必须显式声明：
grid-auto-flow: row dense;
其中 dense 是可选项，用于回填前面留下的空缺（比如某子项跨了两列，后面小项能插进空隙）。不过要注意：dense 会打乱 DOM 顺序渲染，影响语义和可访问性，生产环境慎用。
另一个常见坑：父容器没设 display: grid 或漏写了 grid-template-columns，repeat() 根本不生效——浏览器直接当无效声明忽略。
IE 不支持 repeat(auto-fit) 怎么办
IE10/11 完全不识别 auto-fit 和 auto-fill，会整个丢弃那条 grid-template-columns 声明，退回到无 Grid 状态。
兼容方案只有两个现实选择：
- 用
@supports加一层安全包裹，给现代浏览器上 Grid，给 IE 回退到flex或float布局 - 彻底放弃 IE，用
grid-template-columns: repeat(3, 1fr)写死列数 + 媒体查询分段适配（如@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }）
没有“既用 repeat 又兼容 IE”的取巧办法——语法层面就不被识别，CSS 降级机制也救不了。
真正容易被忽略的是：即使你只面向现代浏览器，也要注意 Safari 旧版本（minmax() 嵌套函数的支持不稳定，min(300px, 1fr) 这类写法建议先查 Can I Use 数据再上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
