grid-auto-rows仅控制隐式行轨道高度，非“自动行高”开关；需配合minmax()、align-items:start和overflow等实现内容自适应。
grid-auto-rows 不是“自动行高”的开关，它只管隐式行的轨道高度；真想让行随内容自然撑开又不崩，得配合 minmax()、align-items 和 overflow 一起用。
grid-auto-rows 设了却没新行？先查显式定义和子项定位
很多人设了 grid-auto-rows: 80px，但加第7个子项时还是挤在第一行——这不是属性失效，而是根本没触发“隐式行”生成。
- 检查是否漏写
grid-template-columns：没列定义，grid-auto-flow: row（默认）会把所有子项塞进第一列，视觉上像没换行 - 确认子项没被
grid-row锁死，比如grid-row: 1会让所有项强行堆在第一行 - 显式行由
grid-template-rows控制，grid-auto-rows只对超出部分生效；比如写了grid-template-rows: 100px 100px，第3行开始才轮到grid-auto-rows
grid-auto-rows: auto 为什么经常“看不见”？
auto 是默认值，但它不等于“自动适配好看”，而是由该行中最高子项决定整行高度。若某子项空或 height: 0，这行可能塌缩到不可见。
-
grid-auto-rows: auto→ 行高 = 该行所有子项的max-content高度，易受单个高元素拖累 -
grid-auto-rows: 0→ 行轨道存在但高度为 0，子项仍按定位渲染，常导致重叠或溢出 -
grid-auto-rows: 1fr→ 容器若无明确高度（如height: auto），所有fr行会收缩为最小内容高度，看起来像没起作用
真正可控的“自动行高”怎么写？
别依赖单一值，用 minmax() 给出行高弹性区间，再约束子项行为：
-
grid-auto-rows: minmax(60px, 120px)：至少 60px，最多 120px，内容少不憋屈，多时不爆炸 -
grid-auto-rows: minmax(0, 1fr)：允许均分剩余空间，但minmax(0, ...)是关键，避免单行无限膨胀 - 搭配
align-items: start关闭默认拉伸，让子项按自身内容高度排布 - 给子项加
overflow: hidden+text-overflow: ellipsis或-webkit-line-clamp，防文字撑破
line-height 和 padding 会偷偷破坏 grid-auto-rows 效果
grid-auto-rows 定义的是轨道高度，不是单元格内容区高度。字体行高、内边距、border 都会额外占空间。
- 若
grid-auto-rows: 60px，但子项font-size: 16px+line-height: 2+padding: 12px，光文字行高就 32px，加上上下 padding 已超 60px -
line-height建议设为具体数值（如line-height: 1.4）或1，避免相对单位放大失控 - padding 要算进轨道预估里，或者改用
box-sizing: border-box统一控制
最常被忽略的一点：grid-auto-rows 的效果永远依赖于 grid-auto-flow 的流向和子项是否“自由”。一旦你给某个子项写了 grid-row: 2 / 3，它就脱离自动流了——后续子项的布局逻辑可能因此错位，而这个错位往往不会报错，只会静默坏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
