真正起作用的是grid-template-columns配合auto-fit或auto-fill；仅设display: grid不定义列结构时，Grid退化为单列布局，子项垂直堆叠，根本无换行可言。
grid-template-columns没设列结构，Grid根本不会“考虑”换行
只写 display: grid 而不定义 grid-template-columns，浏览器会创建一个单列显式网格。所有子项从上到下堆在这一列里，看起来像“卡住不换行”，其实是根本没有列可往右填。
常见错误现象：
- 5 个卡片垂直排成一长列，横向大量空白
-
grid-auto-flow: row（默认值）完全不起作用
必须显式提供列轨道，例如：
-
grid-template-columns: repeat(3, 1fr)→ 固定 3 列 -
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))→ 响应式列数
漏掉这一步，后续所有“换行”调试都无效。
立即学习“前端免费学习笔记（深入）”；
auto-fit 不生效，大概率是容器缺 min-width: 0
在 Flex 容器子项、position: absolute 上下文、或某些 UI 框架（如 Ant Design 的 .ant-card-body）中嵌套 Grid 时，父容器常带隐式最小宽度限制，导致 auto-fit 直接退化为单列。
解决方法很简单：
- 给 Grid 容器加
min-width: 0，强制它放弃“撑宽”执念 - 或明确设
width: 100%/max-width: 100%，提供可靠参考尺寸
没有 min-width: 0，90% 的 auto-fit 换行失败就卡在这儿。
grid-auto-flow: column 不是“换行”，是“换列”，容易让高度失控
设成 column 后，子项会优先往下填满当前列，再开新列。若没配 grid-auto-rows 或 grid-template-rows，浏览器会给每一项生成极高的隐式行，整列无限拉长，横向永远没机会“换”。
适用场景非常有限：
- 瀑布流布局（需配合固定
grid-auto-rows） - 垂直阅读优先的目录列表
日常多列卡片、文章摘要等布局，一律用 row + auto-fit，别碰 column。
子项内容撑开轨道，导致整行溢出
长 URL、哈希值、未折行英文单词会让子项的 min-content 宽度远超预期，Grid 会按这个宽度计算列宽，结果就是横向滚动或单列撑满。
关键修复点在子项自身：
- 加
min-width: 0→ 打破默认的min-width: auto - 加
overflow-wrap: break-word→ 允许断词 - 或更激进地用
overflow-wrap: anywhere（Chrome 89+、Firefox 95+ 支持）
注意：overflow: hidden 也能触发 min-width: 0 隐式重置，但会吃掉滚动能力，慎用于需 tooltip 的场景。
