grid-auto-rows仅作用于隐式行，对显式定义的grid-template-rows无效；统一所有行高应使用grid-template-rows+repeat()，如repeat(4,120px)或repeat(5,1fr)。
grid-auto-rows 不能统一所有行高，它只管“多出来的行”——也就是显式定义的 grid-template-rows 之外的那些隐式行。想靠它一劳永逸地拉齐全部行高，基本会失败。
为什么设了 grid-auto-rows 却没效果？
最常见原因：你已经写了 grid-template-rows: 80px 160px 或类似显式声明。这两行完全不听 grid-auto-rows 的，它只对第 3 行、第 4 行……这些浏览器自动补上的隐式行生效。
- 用浏览器开发者工具 Layout 面板勾选 “Highlight grid tracks”，一眼就能区分哪些是显式轨道、哪些是隐式轨道
- 如果子项数量固定（比如始终 4 张卡片），
grid-auto-rows根本不会触发，此时设了也白设 -
grid-auto-rows: 120px被子项的min-height: 150px或align-self: stretch拉高，实际行高仍会突破
真正能统一所有行高的写法
别绕弯子，直接用 grid-template-rows + repeat()：
- 已知行数（如 4 行）：
grid-template-rows: repeat(4, 120px) - 响应式填满容器（需父容器有
height或min-height）：grid-template-rows: repeat(5, 1fr) - 动态列数 + 固定最小行高：
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr)))—— 注意这不是严格等高，而是“至少 120px”
grid-auto-rows: minmax() 的正确使用场景
它适合内容高度不可控但又不想塌陷的动态列表，比如 JS 插入新卡片、评论流、表单字段组：
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-rows: minmax(60px, auto)：每条隐式行至少 60px，文字多就撑开，不截断 - 必须确保没有
grid-template-rows锁死前几行，或只写前一部分（如grid-template-rows: 150px），剩下全交给grid-auto-rows - 配合
align-items: start，避免子项被stretch拉变形；同时检查子项是否误设了height、min-height或display: flex
最易忽略的一点：行高不一致，90% 不是 Grid 写错了，而是子项自己在“偷偷加高”——逐个点开子项，在 Computed 面板查 min-height、align-self、padding，比反复调 grid-auto-rows 有效得多。
