grid-auto-rows仅作用于隐式行，对显式定义的grid-template-rows无效；需用开发者工具确认隐式轨道，推荐minmax()实现自适应行高，严格等高应改用grid-template-rows。
grid-auto-rows 只管隐式行，不是“全局行高开关”
设了 grid-auto-rows: 120px 却没生效？大概率你写了 grid-template-rows —— 显式定义的行（比如 grid-template-rows: 80px 160px）完全不响应 grid-auto-rows。它只对子项超出显式行数后，浏览器自动创建的那些“隐式行”起作用。
用开发者工具 Layout 面板勾选 “Highlight grid tracks”，能一眼看出哪些是显式轨道（实线）、哪些是隐式轨道（虚线）。别猜，先确认你到底有没有隐式行。
用 minmax() 实现内容自适应的隐式行高
纯数值（如 grid-auto-rows: 120px）会硬性截断内容；纯 auto 又容易导致高度参差。更实用的是 minmax()：
-
grid-auto-rows: minmax(10rem, auto)：每行至少 10rem，文字多就自然撑开，不溢出也不截断 -
grid-auto-rows: minmax(min-content, max-content)：适合卡片列表，紧凑但保留内容完整性 - 注意：
minmax(min-content, 1fr)不推荐——1fr在隐式行中无法参与分配，会退化为auto
避免隐式行塌陷或错位的三个关键点
即使设了 grid-auto-rows，仍可能看到新行高度为 0 或内容溢出，常见原因：
- 容器没设
height或min-height，1fr或minmax()失效，回退到auto - 网格项自身设置了
min-height、align-self: start或内部用了display: flex却没设align-items: stretch - 图片没约束尺寸，或文字未加
line-clamp/overflow: hidden，强行撑高整行
调试时临时加一句 * { outline: 1px solid red !important; }，能快速暴露真实边界和 padding/margin 是否错位。
什么时候该放弃 grid-auto-rows，改用 grid-template-rows
如果你要的是所有行（包括前几行）严格等高，grid-auto-rows 就不是正确工具。它天生只补漏，不主导：
- 固定 4 行卡片：用
grid-template-rows: repeat(4, 120px) - 响应式填满列数：用
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr))) - 配合
grid-auto-rows: 1fr的写法仅适用于“首行特殊 + 后续统一”的混合场景，且必须确保grid-template-rows显式定义的行数少于实际所需
真正难的不是写对属性，而是判断当前布局里哪部分是显式、哪部分靠隐式生成——这点一旦看错，后面所有设置都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
