grid-auto-rows 只对隐式行生效，即内容超出 grid-template-rows 显式定义的行数后自动创建的行；显式行由 grid-template-rows 控制，隐式行才受其约束。
grid-auto-rows 为什么只对“多出来的行”生效
当你用 JS 动态追加卡片、列表项或消息气泡时，这些新元素往往没被显式分配到某一行（比如没写 grid-row: 3），浏览器就会为它们创建**隐式行轨道**——grid-auto-rows 管的就是这部分。
但如果你已经写了 grid-template-rows: 100px 100px，前两行就完全由它控制；后续第 3、4、5… 行才轮到 grid-auto-rows。DevTools 的 Layout 面板里勾选 “Highlight grid tracks”，一眼就能看出哪些是灰色虚线（隐式）、哪些是实线（显式）。
- 显式行：由
grid-template-rows或grid-row显式指定位置的行 - 隐式行：内容数量超出预设轨道后，Grid 自动补的行，
grid-auto-rows才起作用 - 常见误判：看到前几行高度不一，就去调
grid-auto-rows，其实该查grid-template-rows
minmax(80px, auto) 是动态列表最稳的取值
固定像素（如 grid-auto-rows: 120px）在内容少时留白多，内容多时又会溢出；全用 auto 又会导致行高参差、视觉割裂。minmax(80px, auto) 是平衡点：每行至少 80px，保证基础节奏感，内容撑开时也不截断。
- 图片未加载完、字体重排、响应式换行都会影响内容高度，
auto部分让它有缓冲余地 - 避免用
minmax(0, max-content)：最大高度不可控，长文本+大图可能把整页拉成瀑布 - 如果后端返回的是纯文字摘要，可压到
minmax(60px, 120px)，硬性封顶防失控
滚动容器里 grid-auto-rows 容易失效的两个条件
当 Grid 容器本身在 overflow-y: auto 区域内，且子项高度由 JS 渲染后才确定（比如 Markdown 解析、代码高亮），grid-auto-rows 可能不按预期工作——不是属性错了，而是触发时机问题。
- 容器没有明确高度来源：
height: auto下，1fr或minmax(..., auto)会退化为min-content，实际表现接近auto - 子项内部用了
display: contents：它的内容脱离盒模型，导致min-content计算为 0，整行塌陷 - 临时验证法：给容器加
min-height: 300px，看行高是否恢复；再逐个检查子项的align-self和min-height
和 grid-template-rows 搭配才能覆盖全部场景
纯靠 grid-auto-rows 无法统一所有行高，尤其当首屏已渲染部分数据、后续再增量加载时。必须配合 grid-template-rows 做兜底。
- 已知最多显示 6 行：直接
grid-template-rows: repeat(6, minmax(80px, auto)) - 行数完全不确定，但列数固定（如三栏商品列表）：
grid-template-columns: repeat(3, 1fr)+grid-auto-rows: minmax(100px, auto) - 想让首行标题区紧凑、其余卡片等高：
grid-template-rows: min-content minmax(120px, auto)，第二行开始才走自动逻辑
真正容易被忽略的是 align-self 和 overflow 的组合影响：一个 align-self: start 就能让 stretch 失效，再配上没设 overflow: hidden 的长文本，minmax 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
