grid-auto-rows仅作用于隐式行，对已定义的显式行（如grid-template-rows指定的行）无效；其推荐写法为minmax(60px, auto)，兼顾基础高度与内容自适应，且需确保子项具备撑高条件。
grid-auto-rows 只管隐式行，显式行它插不上手
写了 grid-auto-rows: minmax(60px, auto) 却发现前两行还是高低不一？大概率是你已经定义了 grid-template-rows: 80px 120px——这两行是“显式行”，grid-auto-rows 对它们完全无效。浏览器开发者工具 Layout 面板里勾选 “Highlight grid tracks”，一眼就能看出哪些是蓝色（显式）、哪些是浅灰（隐式）。动态插入第 3、4、5… 个子项时，新生成的那些行才归 grid-auto-rows 管。
minmax(最小值, auto) 是最常用也最稳的写法
直接写 grid-auto-rows: auto 表面看没问题，但实际容易塌陷：父容器没设 height 或 min-height 时，auto 会退化为内容最小高度，文字少就压成一条线。minmax(60px, auto) 才是兼顾可读性与弹性的通用解：
-
60px提供基础阅读空间（适配 16px 字体 + 1.5 行高） -
auto允许内容自然撑开，不截断也不留白 - 比
minmax(60px, max-content)更轻量，避免频繁重排
响应式场景下建议用 minmax(1.8em, auto)，让基准随根字体缩放。
内容撑不开行高？别怪 grid-auto-rows，先查子项自己
即使 grid-auto-rows: minmax(60px, auto) 写对了，新插入的卡片仍显示为一条细线，问题往往出在子项身上：
- 子项写了
height: 0、min-height: 0或max-height: 10px - 外层用了
display: contents，破坏了 Grid 的拉伸上下文 - 父容器
align-items: stretch是默认值，但子项内部有flex-direction: column却没设flex: 1，导致高度无主张
临时加一句 * { outline: 1px solid red !important; }，能快速暴露真实尺寸和 padding/margin 是否错位。
想统一所有行高？别只靠 grid-auto-rows
要让整组卡片（包括显式行）视觉上等高，grid-auto-rows 不是万能钥匙。更直接的做法是放弃显式行数锁定，改用：
-
grid-template-rows: repeat(auto-fill, minmax(120px, 1fr)))—— 动态列数+固定最小行高 -
grid-template-rows: repeat(4, 120px)—— 已知行数时最干脆 -
grid-template-rows: repeat(5, 1fr)—— 容器有明确height或min-height时均分空间
注意：1fr 在无高度约束时会退化为 auto，不是魔法单位。
真正容易被忽略的是：grid-auto-rows 控制的是轨道尺寸，不是子元素高度；它定下底线，但撑不撑得上去，还得看子项有没有“长高的意愿”和“自由的空间”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
