要实现CSS Grid中元素按行排列并自动换行，需结合grid-auto-flow: row与grid-template-columns。首先设置grid-auto-flow: row使项目逐行填充；再使用repeat(auto-fit, minmax(200px, 1fr))定义列的最小宽度和自适应分配，确保容器空间不足时自动换行；配合grid-auto-rows设定行高，gap设置间距。该布局适用于卡片、图片墙等响应式多行展示场景，核心在于列轨道的约束与自动流动方向的协同作用。
在使用 CSS Grid 布局时，若希望多个元素按行排列并自动换行，可以结合 grid-auto-flow: row 与相关属性实现多行自适应布局。虽然 grid-auto-flow: row 本身不会直接导致“换行”，但配合其他属性可以控制元素的流动方向和容器的行生成行为。
理解 grid-auto-flow: row 的作用
grid-auto-flow: row 表示新生成的网格项应逐行填充，即先填满第一行，再进入下一行。它主要影响那些未通过 grid-row 或 grid-column 显式定位的项目。
注意：要实现“自动换行”，还需要设置网格容器的列轨道（如使用 grid-template-columns），让列数固定或自适应，从而迫使内容换行。实现多行自适应排列的关键步骤
要让元素在网格中按行排列并自动换行，核心是：
- 定义列的数量或宽度，使容器能容纳指定数量的列
- 使用 grid-auto-rows 设置每行高度（可选）
- 设置 grid-auto-flow: row 确保项目按行顺序排列
- 利用 auto-fit 或 auto-fill 实现响应式列自适应
实际代码示例
以下是一个典型的自适应多行排列布局：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 100px;
grid-auto-flow: row;
gap: 10px;
}
```
解释：
- repeat(auto-fit, minmax(200px, 1fr))：创建尽可能多的列，每列最小 200px，最大 1fr，超出则换行
- grid-auto-rows: 100px：自动创建的行高度为 100px
- grid-auto-flow: row：元素优先横向填满，再向下生成新行
- gap：设置间距
常见应用场景
这种布局适合卡片列表、图片墙、商品展示等需要响应式多行排列的场景。当容器宽度变化时，列数会自动调整，项目重新分布，始终保持良好的视觉结构。
基本上就这些。关键是理解 grid-auto-flow 配合 grid-template-columns 才能实现真正的“自动换行”效果。单纯设置 grid-auto-flow: row 不足以触发换行，必须有列的约束条件。
