grid-auto-rows仅定义隐式行轨道高度，不控制是否自动生成行；真正触发隐式行的是子项越界定位或grid-auto-flow: row下的自动填充。
grid-auto-rows 控制的是隐式行轨道高度，不是“自动生成行”的开关
很多人误以为设了 grid-auto-rows 就能“让网格自动加行”，其实它只定义**新增的隐式行轨道（implicit grid rows）的高度**。真正触发“自动生成行”的，是子项位置超出了显式定义的行范围（比如用 grid-row: 3 / 4 但只写了两行 grid-template-rows: 1fr 2fr），或者用了 grid-auto-flow: row（默认值）且子项没指定明确行列位置。
常见错误现象：
– 网格容器里放了 10 个子项，但只显示前 6 个；
– 子项堆在第一行不换行；
– 设置了 grid-auto-rows: 100px 却没看到新行出现。
- 检查是否漏写了
grid-template-columns—— 没列定义，grid-auto-flow: row会把所有子项塞进第一列，导致“看似没换行” - 确认子项没被
grid-row或grid-column锁死在某一行（比如固定写死grid-row: 1） -
grid-auto-rows只对隐式行生效，显式行由grid-template-rows控制，二者不冲突但职责分明
grid-auto-rows 值怎么写才有效
它的值和 grid-template-rows 语法一致，支持长度、百分比、fr、minmax() 等，但不能用 auto（会退化为 auto 行高，可能塌陷）。
典型可用写法：
立即学习“前端免费学习笔记（深入）”；
grid-auto-rows: 80px; grid-auto-rows: 1fr; grid-auto-rows: minmax(60px, 1fr); grid-auto-rows: repeat(3, 50px); /* 注意：repeat() 在 auto-rows 中仅定义单个隐式行的高度，不是生成 3 行 */
⚠️ 容易踩的坑：
– grid-auto-rows: auto 看似合理，但实际会让隐式行高度由内容撑开，若子项无内容或高度为 0，该行可能不可见；
– grid-auto-rows: 0 不会隐藏行，而是让行轨道存在但高度为 0，子项仍按定位渲染，可能溢出或重叠；
– 使用 fr 单位时，若容器高度未限定（如 height: auto），所有 fr 行会收缩为最小内容高度，看起来像没起作用。
配合 grid-auto-flow 才能真正“自动布局”
仅靠 grid-auto-rows 不足以驱动布局流。必须确保 grid-auto-flow 处于行方向（默认就是 row），且子项未被显式定位“卡住”。
- 保持默认：
grid-auto-flow: row→ 新子项按顺序填满当前行，再开新行 - 改用
grid-auto-flow: row dense→ 允许回填前面空出的空隙（适合打乱顺序又想紧凑排列） - 避免写
grid-auto-flow: column—— 此时新增行由grid-auto-columns控制，grid-auto-rows形同虚设
一个最小可运行示例：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 60px;
gap: 8px;
}
.item { background: #eee; }只要子项数量超过 3 的倍数（比如 10 个），就会自动创建第 4 行、第 5 行……每行高 60px。
响应式中 grid-auto-rows 容易被忽略的限制
它本身不响应尺寸变化，但可通过媒体查询重新设置。不过要注意：修改 grid-auto-rows 不会触发布局重排已存在的隐式行（浏览器不会 retroactively 调整历史生成的行高），只影响后续新增的隐式行。
更可靠的响应式做法是结合 grid-template-rows + grid-auto-rows，例如：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-auto-rows: 48px; /* 小屏下单列，每隐式行更紧凑 */
}
}如果需要动态控制行数（比如“最多显示 5 行，超出滚动”），得靠 max-height + overflow-y: auto，grid-auto-rows 不提供行数上限能力。
真正难调的点往往不在值本身，而在于没意识到：隐式网格轨道的生成，本质是 CSS Grid 对“越界定位”或“自动填充”的被动响应，不是主动的循环指令。盯着 grid-auto-rows 调，不如先确认子项有没有被正确释放到自动流里。
