grid-template-rows: auto 仅控制显式定义的行，动态新增项触发的隐式行由 grid-auto-rows 管理；应使用 grid-auto-rows: minmax(60px, auto) 保障最小高度并允许内容撑开，避免截断或塌陷。
直接用 grid-template-rows: auto 或 grid-auto-rows: minmax(最小值, auto) 就能解决，不需要 JS 计算高度，也不用给子项写 height: 100%。
为什么 grid-template-rows: auto 有时没效果
不是它失效，而是你误用了作用范围：auto 只控制显式定义的那些行；如果内容超出预设行数，新增的行属于“隐式行”，由 grid-auto-rows 管理，而不是 grid-template-rows。
- 显式行（
grid-template-rows）：你手写的每一条，比如grid-template-rows: auto 1fr—— 只管这两行 - 隐式行（
grid-auto-rows）：JavaScript 动态插入第 3、4、5… 个网格项时，浏览器自动创建的行，它们听grid-auto-rows的 - 常见错觉：写了
grid-template-rows: auto就以为所有行都自适应，结果新卡片一加进来就塌陷或溢出
grid-auto-rows: minmax(60px, auto) 是最稳妥的通用解
动态内容高度不可预测，minmax(60px, auto) 能兼顾最小可读性与弹性伸展，比裸写 auto 更可控。
-
minmax(60px, auto)：每条隐式行至少高 60px（防文字挤成一条线），有内容就往上撑，不截断也不留白 - 避免
grid-auto-rows: 80px：内容超长时被裁剪，且不响应字体缩放 - 慎用
grid-auto-rows: 1fr：仅当容器有固定高度（如height: 600px）且需均分空间时才合理，否则空行会占满视口 - 别用
max-content在大量项中：可能触发频繁重排，改用fit-content(400px)设上限更稳
子元素 height: 100% 失效？根本不用它
CSS Grid 默认让子项在行内拉伸（align-items: stretch），写 height: 100% 反而容易因父容器无明确高度而失败。
- Grid 容器没设
height或min-height时，height: 100%没参照物，必然无效 - 正确做法是删掉子项的
height: 100%，靠 Grid 自身的align-items: stretch（默认值）撑满整行 - 若需顶部对齐，显式写
align-items: start，别依赖 height - 真要控制子项内部高度（如卡片里的头像+文字区域），用
display: flex; flex-direction: column+flex: 1，不是靠外层 Grid 的 height
响应式下占位符或行高不一致？用 minmax() 替代像素硬编码
小屏字体放大、行高增加，固定像素的行高或占位符会溢出或显得太空——问题本质是把“内容驱动的高度”当成“容器驱动的尺寸”来处理。
- 把
grid-auto-rows: 72px改成grid-auto-rows: minmax(56px, max-content)：保底 56px（适配 16px 字体+1.5 行高），内容多时自动扩展 - 占位符元素（如“加载中”提示）别设
height: 60px，改用min-height: 56px+line-clamp: 2防无限撑高 - 禁用
display: none隐藏占位符：它会退出网格布局流程，位置丢失；改用visibility: hidden或opacity: 0
真正难的不是选哪个值，而是分清哪些行该由 grid-template-rows 显式定义（比如固定头部）、哪些该交给 grid-auto-rows 动态管理（比如列表项），以及什么时候该用 minmax() 而不是 fr 或 auto —— 边界模糊的地方，恰恰是 Grid 布局最常出问题的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
