grid-auto-flow: row 是默认值，仅控制网格项按行顺序填入而不自动增加行轨道；真正实现“换行”需配合 grid-auto-rows 设置隐式行高，并结合 repeat(auto-fit/fill) 动态列定义。
grid-auto-flow: row 是默认值，但不会自动换行
很多人以为 grid-auto-flow 默认会让网格项“像 Flex 布局那样自动折行”，其实不是。grid-auto-flow: row（默认值）只控制新项按行顺序填入，**不改变轨道数量**——如果列数固定（比如用 grid-template-columns: repeat(3, 1fr)），超出的项会继续往第 4、5、6… 行塞，但不会主动新增行轨道；它只是“填空”，不是“扩容”。
真正触发换行效果的，是配合 grid-template-rows: auto 或更常见的——改用 grid-auto-rows 定义隐式行高，同时确保容器有足够高度或使用 grid-auto-flow: row dense 来紧凑填充。
-
grid-auto-flow: row+ 固定列数 → 新项严格按行列序填入，行数由内容撑开（隐式行轨道动态生成） - 没设
grid-auto-rows时，隐式行高为auto，即由子项自身高度决定，容易导致行高不一致 - 若容器
height有限且未启用滚动，多余项可能被裁剪，而不是“换到下一行”
想让网格项像 flex-wrap: wrap 那样自动换行？必须配 grid-auto-rows
Grid 里没有直接等价于 flex-wrap: wrap 的单一属性。要实现“列数固定、行数自适应”的流式布局，关键不是改 grid-auto-flow，而是让隐式行能被创建并具有合理高度：
- 显式设置
grid-auto-rows: minmax(min-content, max-content)或grid-auto-rows: 100px，否则浏览器对隐式行的处理较松散 - 搭配
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))可响应式分列，此时grid-auto-flow: row才真正表现出“换行”视觉效果 - 避免只写
grid-template-columns却完全忽略grid-auto-rows，否则在 Safari 中可能出现隐式行高度塌陷
示例片段：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
grid-auto-rows: 1fr; /* 关键：让每行都有可预测高度 */
grid-auto-flow: row; /* 默认可省略 */
}
grid-auto-flow: dense 会打乱源顺序，慎用
grid-auto-flow: row dense 允许网格项回填前面留下的空白（比如某项设置了 grid-column: span 2 导致右侧出现空隙），看起来更“紧凑”，但它会改变 DOM 渲染顺序，影响可访问性（screen reader）、键盘 tab 顺序和 SEO。
- 仅适用于视觉优先、无语义顺序要求的场景（如图片瀑布流）
- 与
order或grid-area显式定位混用时，dense 模式的行为极难预测 - Chrome 和 Firefox 对 dense 的实现基本一致，但旧版 Safari 存在回填遗漏 bug
常见错误：用 grid-template-areas 强制布局却忘了留空位
当用 grid-template-areas 写死结构（如 "a b c" "d . e"），而实际子元素数量超过定义区域数时，多余项会被丢进隐式网格——但它们不会自动“换行”，而是堆在最后一行末尾，甚至溢出容器。
- 此时
grid-auto-flow仍生效，但作用域仅限于未被grid-area覆盖的项 - 解决方法不是调
grid-auto-flow，而是改用repeat()+auto-fit动态生成区域，或接受部分项需手动指定grid-area - 调试技巧：给容器加
outline: 1px solid red，再用 DevTools 查看哪些项落在了隐式网格中
grid-auto-flow 本身不控制“是否换行”，它只决定新项填入方向和是否允许回填；真正决定换行节奏的，是列定义方式、隐式行配置，以及容器尺寸约束。最容易被忽略的是：没设 grid-auto-rows 时，不同浏览器对隐式行高度的推算逻辑差异很大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
