auto-fit不换行是因为它只动态调整列数，换行由grid-auto-flow: row wrap控制，且需容器有明确宽度、子项可压缩、避免white-space: nowrap等限制。
grid-template-columns设成repeat(auto-fit)为啥不换行
因为auto-fit本身不控制换行，它只影响列数的动态收缩——真正决定内容是否折行的是grid-auto-flow和容器宽高约束。常见现象是子项挤成一长条、溢出容器右侧，看着像“没换行”，其实是grid-auto-flow: row（默认值）在起作用，且每列最小宽度卡死了。
实操建议：
- 确认父容器有明确宽度（比如
width: 100%或max-width），否则auto-fit可能算出单列 - 加
grid-auto-flow: row wrap——注意：CSS Grid 的wrap必须显式写在这里，不能靠flex-wrap那套逻辑 - 用
minmax(200px, 1fr)代替minmax(200px, auto)，后者会让列宽随内容撑开，失去换行触发条件 - 避免给子项设
white-space: nowrap或固定width，这会阻止它们被压缩进新行
grid-auto-flow: row wrap 和 column wrap 的实际区别
row wrap是横向填满后换行，符合阅读习惯；column wrap是纵向填满后换列，适合瀑布流但兼容性差（Firefox 支持弱，Safari 旧版不支持）。真实项目里几乎只用row wrap，除非你明确要垂直滚动优先的布局。
关键差异点：
立即学习“前端免费学习笔记（深入）”；
-
row wrap下，子项顺序按 HTML 流，从左到右、从上到下排列 -
column wrap下，顺序变成从上到下、从左到右，但容器高度必须受限（如height: 400px），否则不会触发“列满” -
column wrap在子项高度差异大时容易产生巨大空白，且无法用align-content均匀分布 - 所有主流浏览器对
row wrap的支持稳定，无需前缀
子项内容过长导致网格错位怎么办
这不是 Grid 本身的问题，而是文本/图片未约束尺寸，撑开了轨道。Grid 轨道高度默认由内容决定（auto），一旦某项内容超高，整行都会被拉高，看起来像“错位”。
解决路径很直接：
- 给子项加
overflow: hidden+text-overflow: ellipsis（配合white-space: nowrap和width）处理文字 - 图片统一用
img { max-width: 100%; height: auto; }，防止突破格子 - 用
grid-auto-rows: minmax(100px, auto)限制行高下限，避免空行塌陷 - 慎用
align-items: stretch（默认值），如果子项内有height: 100%又没父容器高度，会失效甚至引发循环计算
IE11里grid-wrap完全不生效的原因
因为 IE11 的 CSS Grid 是旧草案实现，根本不支持grid-auto-flow: row wrap。你写的这行会被整个忽略，退回到row单行模式。
能做的有限但实用：
- 用
@supports (display: grid) and (grid-auto-flow: row wrap)做特性检测，给现代浏览器用 Grid，给 IE11 fallback 到float或inline-block - 避免在 IE11 环境下依赖自动换行，改用固定列数+媒体查询（如
repeat(3, 1fr)→repeat(2, 1fr)→repeat(1, 1fr)） - 不要试图用
-ms-grid模拟wrap，它的-ms-grid-row只能手动指定，无法响应式重排
自动换行这件事，表面是加个wrap就完事，实际得同时管住容器尺寸、轨道定义、子项弹性、以及老浏览器的断层——漏掉任意一环，布局就静悄悄地坏掉了。
