CSS Grid 子元素不会自动换行，换行本质是隐式行被触发创建的过程；必须显式定义 grid-template-columns 划分列轨道，否则默认单列堆叠；grid-auto-flow: column 会优先纵向填满列，需配合 grid-auto-rows 和列数限制使用。
CSS Grid 的子元素不会“自动换行”，它只按轨道规则填空——所谓换行，是你用 grid-template-columns 划出列边界后，内容被“挤”下去的结果。
显式网格没设列数，就根本不会换行
如果你只写 display: grid，但没定义 grid-template-columns，浏览器会默认创建一个单列的显式网格（grid-template-columns: none），所有子项都堆在第一列里，从上到下排，看起来像“没换行”，其实是没列可换。
- 现象：5 个
.item全挤在一列，容器高度暴涨，横向空白却很多 - 原因：
grid-auto-flow: row（默认）想往右填，但你没给“右边”留位置 - 解决：必须显式声明列结构，比如
grid-template-columns: repeat(3, 1fr)或更灵活的repeat(auto-fit, minmax(200px, 1fr))
隐式网格才是“换行”的发生地
当子项数量超过显式列数，Grid 就会自动生成新行——这些行属于“隐式网格”，由 grid-auto-rows 控制高度。所谓“换行”，本质是隐式行被触发创建的过程。
-
grid-auto-rows: auto→ 行高由内容撑开，可能导致高低不一 -
grid-auto-rows: 120px→ 所有隐式行统一高度，视觉整齐 - 漏设
grid-auto-rows时，某些子项可能被压缩（尤其含图片或长文本），需配合min-width: 0防溢出
auto-fit 和 auto-fill 不是换行开关，而是列数决策器
它们决定“显式列轨道”生成多少列，间接影响何时触发隐式行。别把它们当成 flex-wrap 的等价物。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit：生成尽可能多的列，但会把空列“收掉”（列宽拉满），适合卡片类布局 -
auto-fill：同样生成尽可能多的列，但保留空列（列宽保持最小值），适合需要占位的场景 - 错误用法：
grid-template-columns: repeat(auto-fit, 1fr)—— 缺少minmax()，无法约束最小宽度，小屏下仍可能单列溢出
为什么有时加了 grid-auto-flow: column 反而“更不换行”？
因为 column 流向会让子项优先往下填满当前列，再开新列。若你没设 grid-template-rows 或 grid-auto-rows，浏览器会为每一项生成极高的隐式行，导致整列无限拉长，横向永远没机会“换”。
- 适用场景：瀑布流、垂直阅读优先的列表（如文档目录）
- 必须配合：
grid-auto-rows: 80px（固定行高） +grid-template-columns: repeat(3, 1fr)（限定列数） - 风险：DOM 顺序与视觉顺序分离，影响屏幕阅读器和 SEO
真正卡住人的，从来不是“怎么让 Grid 换行”，而是没意识到：Grid 里没有“流”只有“格”。你得先画好格子，它才肯把东西放进去——格子画歪了，东西自然摆错位。
