grid-auto-flow: row 是默认值，显式设置通常无效；真正控制自动增长的是 grid-auto-rows/columns，它们定义隐式轨道尺寸，而布局顺序、容器约束和子项对齐方式共同影响最终效果。
grid-auto-flow: row 是默认值，设了等于没设
绝大多数情况下，grid-auto-flow: row 不需要显式写——它就是 CSS Grid 的初始值。你加了它，浏览器不会报错，但也不会改变行为，除非你之前改过这个属性（比如设成 column 或 row dense）。真正影响“自动增长”的，是网格容器有没有预留足够轨道（grid-template-rows / grid-template-columns），以及子项是否超出显式定义的格子数。
网格项目“自动增长”实际靠 grid-auto-rows 和 grid-auto-columns 控制
当子项数量超过 grid-template-rows 定义的行数时，Grid 会用 grid-auto-rows 创建隐式行轨道；列同理。这才是决定新行/列“长什么样”的关键：
-
grid-auto-rows: 1fr→ 新增行等分剩余空间（注意：仅在容器有高度约束且使用fr时才生效，否则按内容撑开） -
grid-auto-rows: minmax(100px, auto)→ 每个新增行至少 100px，内容多就自适应变高 -
grid-auto-rows: 0→ 危险！会导致新增行高度为 0，子项不可见（常见误配）
示例：
.container {
display: grid;
grid-template-rows: 200px; /* 只定义了 1 行 */
grid-auto-rows: 80px; /* 第 2 行起，每行高 80px */
}
grid-auto-flow: row dense 可能让你的布局“跳序”，慎用
row dense 启用后，Grid 会尝试用更小的空隙填充前面的隐式行，导致子项 DOM 顺序和视觉顺序不一致。这在语义化、可访问性或依赖顺序的 JS 操作中容易出问题：
- 屏幕阅读器仍按 DOM 顺序读，但视觉上第 3 个元素可能出现在第 1 行
- 用
:nth-child(2)选中元素时，样式可能作用在意外位置 - 只在明确需要紧凑填满（如瀑布流卡片、无序图库）且放弃顺序敏感性时才考虑
自动增长失效的三个高频原因
不是属性没生效，而是条件没满足：
- 容器没有设置
height或max-height，且子项全是grid-auto-rows: 1fr→ 浏览器无法分配“剩余空间”，1fr退化为auto，所有行按内容高度展开 - 子项设置了
align-self: stretch（默认值），但父容器grid-auto-rows是固定值（如50px）→ 子项会被截断或溢出，而非“撑高”轨道 - 用了
grid-template-areas但没覆盖全部子项 → 未匹配到区域的子项进入隐式网格，此时grid-auto-rows生效，但容易被忽略其存在
最常被漏掉的一点：隐式网格轨道本身不接受 justify-items 或 align-items 的直接控制，它的对齐行为完全继承自容器级设置，但子项自身的 justify-self / align-self 依然有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
