Grid布局中“换行异常”实为grid-auto-flow默认row流向与预期column流向不一致所致；应根据需求选用row/column/dense流向，配合grid-template-columns、grid-auto-rows等控制轨道尺寸与填充顺序。
Grid 布局中元素“换行异常”，通常不是真的“换行”出错，而是 grid-auto-flow 的默认行为（row）与你的预期（比如希望按列填满再换行）不一致导致的视觉错觉。关键在于理解它如何分配自动放置的子项，并主动控制流向。
明确 grid-auto-flow 的作用
grid-auto-flow 决定**未被显式定位**（即没用 grid-row/grid-column 指定位置）的网格项，如何自动填入空闲网格单元。它不控制“换行”，而是控制“填充顺序”：
-
row（默认）：从左到右、从上到下，逐行填满 —— 容易在列数固定时出现“断层”感 -
column：从上到下、从左到右，逐列填满 —— 适合瀑布流或垂直优先布局 -
row dense或column dense：启用“密集填充”，会回填前面留下的小空隙（慎用，可能打乱源顺序）
检查容器的显式轨道定义
换行“异常”常因 grid-template-rows 或 grid-template-columns 设置不当而加剧：
- 只设了
grid-template-columns: repeat(3, 1fr)，但没设grid-template-rows→ 行数由内容撑开，每行固定3列，但高度不一，看起来像“错位” - 若希望严格等高换行，应配合
grid-auto-rows: minmax(100px, auto)或固定值 - 避免同时滥用
grid-template-areas和大量自动项，容易冲突
按需切换 flow 方向 + 配合 track sizing
例如想实现“先填满第一列，再第二列”，就该用 column 流向，并确保列数可控：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
grid-auto-flow: column; /* 从上到下、从左到右填 */
grid-auto-rows: 80px; /* 每行高度统一，列内元素自然对齐 */
}这样第1、4、7项在同一列，视觉上就是“竖向排列”，不会出现横向挤满后突然跳到下一行开头的错觉。
警惕 dense 模式带来的顺序风险
grid-auto-flow: row dense 会让后续小尺寸项插进前面大项留下的空隙，虽然“填得满”，但 DOM 顺序和视觉顺序可能不一致，影响可访问性和逻辑阅读流。除非明确需要紧凑排版（如相册缩略图），否则优先用 row 或 column + 合理的 minmax() 控制单格大小。
