子元素换行不生效是因grid-auto-flow未正确配置或轨道无足够空间。需设置grid-template-columns定义列宽，限制容器宽度，并确保grid-auto-flow为row（默认），必要时添加grid-auto-rows控制行高；若存在空隙可启用dense模式回填。检查是否遗漏auto-rows、容器宽度不限或子元素设了white-space:nowrap等阻止换行的样式。正确示例：container设display:grid，repeat(3,100px)定义三列，width:320px迫使换行，超量子项自动进入下一行。使用grid-auto-flow:row dense可优化布局紧凑性，但可能打乱视觉顺序。总之，合理配置列数、容器尺寸及自动流动方向即可实现换行。
当使用 CSS Grid 布局时，如果子元素在网格容器中换行不生效，通常是因为 grid-auto-flow 的设置未正确配置，或者网格轨道（rows / columns）没有足够空间触发自动排列。即使设置了 grid-template-columns，若子项超出容器宽度，也不会自动换行，除非明确控制自动布局行为。
理解 grid-auto-flow 的作用
grid-auto-flow 决定网格中自动放置的子元素如何分配行或列。默认值是 row，表示子元素按行填充；column 表示按列填充；dense 可用于填补前面留下的空隙。
如果你希望子元素在一行放不下时自动换到下一行，需结合以下设置：
- 使用
grid-template-columns定义显式列宽 - 确保容器宽度不足以容纳所有子项在同一行
- 设置
grid-auto-flow: row（默认可省略），必要时添加grid-auto-rows控制行高 - 若想更紧凑排列，可加
dense模式：如grid-auto-flow: row dense
常见问题与解决方法
如果换行仍然无效，请检查以下几点：
立即学习“前端免费学习笔记（深入）”；
-
是否定义了足够的列？
例如只定义两列：grid-template-columns: 100px 100px;，但有6个子元素，则第3个以后的元素会自动进入下一行（前提是grid-auto-rows存在或高度由内容撑开） -
容器是否设置了固定宽度或 max-width？
如果没有限制宽度，容器可能无限拉伸，导致“看起来没换行” -
子元素是否设置了强制不换行样式？
比如white-space: nowrap或min-width: 100%会影响布局 -
是否遗漏了 grid-auto-rows？
当使用多行时，建议设置grid-auto-rows: auto或指定高度，避免行高为0
正确示例代码
.container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 每行最多3个 */
grid-gap: 10px;
grid-auto-flow: row; /* 可省略，默认就是row */
width: 320px; /* 限制宽度，迫使换行 */
}
.item {
background: #007acc;
color: white;
padding: 20px;
text-align: center;
}
上面代码中，若有超过3个子元素，第4个会自动出现在第二行，实现“换行”效果。
使用 dense 优化空间利用
当你在网格中存在不同跨度的子项（如某些占两列），可能会留下空白。使用：
grid-auto-flow: row dense;可以让后面的较小项目“回填”前面的空位，提升空间利用率。注意这可能导致 DOM 顺序与视觉顺序不一致。
基本上就这些。只要合理设置 grid-template-columns、控制容器尺寸，并确认 grid-auto-flow 为 row，子元素就能正常换行。dense 是可选优化，根据布局需求决定是否启用。
