grid-auto-rows仅控制隐式行高，对grid-template-rows定义的显式行无效；需配合容器高度约束使用minmax(min, auto)或1fr（当容器有明确高度时）。
grid-auto-rows 只管“多出来的行”，不是全局行高开关
写了 grid-auto-rows: 100px 却发现前两行高度不一致？大概率是你已经定义了 grid-template-rows，比如 grid-template-rows: 60px auto。这种情况下，grid-auto-rows 完全不生效——它只控制子项超出显式行数后，浏览器自动创建的那些隐式行。
显式行（grid-template-rows 定义的）和隐式行（自动补位的）是两套独立系统，CSS 不会跨轨合并尺寸逻辑。
- 显式行数量 = 你写在
grid-template-rows里的轨道数（如1fr auto 200px→ 3 行） - 第 4 个及之后的网格项，才会触发隐式行，此时才轮到
grid-auto-rows发挥作用 - 检查是否误用：用浏览器开发者工具选中网格容器，看 computed 样式里
grid-template-rows是否非none
minmax(60px, auto) 是最常用且稳妥的取值
直接设 grid-auto-rows: auto（默认值）容易导致内容少时行高塌陷，文字挤成一条线；设固定值如 80px 又会在内容变多时截断或溢出。生产环境推荐用 minmax() 函数兜底。
-
grid-auto-rows: minmax(60px, auto)：每条隐式行至少 60px 高（保障可读性），内容撑开时无上限 - 避免
max-content：在列表项较多时可能引发频繁重排，尤其含图片或异步加载内容 - 慎用
1fr：仅当容器有明确高度（如height: 600px）且需均分空间时才合理；否则空隐式行会占满整个视口 - 不建议
fit-content(400px)单独用于行高——它更适合列宽控制，对行高兼容性差
为什么 grid-auto-rows: 1fr 有时看起来“没反应”
现象：设置了 grid-auto-rows: 1fr，但新增的网格项高度为 0 或极小。根本原因不是语法错，而是容器缺失高度约束。
1fr 表示“等分可用空间”，如果网格容器本身没有 height、min-height 或父级高度限制，可用空间就是 0，结果所有 1fr 行都坍缩为最小内容高度。
- 必须配套设置容器高度：如
height: 500px或min-height: 300px -
align-items: stretch（默认）此时才有效，子项才能拉伸填满整行 - 若容器高度由内容撑开（即无固定高），
1fr在隐式行中基本不可用，应换回minmax(min, auto)
子元素写 height: 100% 是典型干扰项
很多人试图让卡片内容“填满整行”，给子项加 height: 100%，结果无效甚至破坏布局。Grid 的默认行为已足够：只要容器有高度、align-items: stretch 未被覆盖，子项天然拉伸。
- 删掉所有子项上的
height: 100%—— 它在 Grid 中多数时候是冗余甚至有害的 - 若需顶部对齐，显式写
align-self: start，而不是靠 height 模拟 - 真要控制内部结构（如头像+文字区域等高），用
display: flex; flex-direction: column+flex: 1，别依赖外层 Grid 的 height
隐式行的高度控制本质是轨道分配问题，不是子项样式问题。盯住 grid-auto-rows 和容器约束，比在子项上反复调试 height 更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
