grid-auto-rows不可省略，因其专管隐式行高度，省略则默认auto导致行高不均、视觉割裂；需用minmax(120px, auto)等显式定义兜底，且仅对未被grid-row定位的项生效。
grid-auto-rows 为什么不能省略
当列表项数量不确定、高度也不固定时，只写 grid-template-columns 而不设 grid-auto-rows，会导致隐式行高为 auto——也就是由内容撑开。这看似合理，但实际会引发两个问题：一是相邻行高度差异大，视觉割裂；二是某些子项（比如带图片或长文本的卡片）可能意外拉高整行，挤占其他项空间。
显式设置 grid-auto-rows 是给所有自动创建的行一个“基准线”，不是硬性约束，而是兜底控制。它只作用于没被 grid-row 显式定位的项所落入的行。
-
grid-auto-rows: minmax(120px, auto)最常用：保证最小可读高度，内容多时自然撑开 -
grid-auto-rows: 1fr仅在容器有明确高度（如height: 600px）时可用，否则无效 -
grid-auto-rows: 150px适合高度基本一致的卡片，但需确保内容不会溢出
minmax() 里的 auto 和 max-content 到底怎么选
minmax(120px, auto) 和 minmax(120px, max-content) 看似只差一个词，行为却完全不同：
-
auto表示“让内容决定上限”——文字折行、图片缩放后，行高按最终渲染尺寸定 -
max-content表示“按内容原始宽度/高度算最大值”——比如一行超长 URL 不折行，就会把整行顶得极高，极易破坏布局
绝大多数动态列表应选 auto。只有当你明确需要某类项（如 banner 图）必须完整显示、不允许任何裁剪或折行时，才考虑 max-content，且要配合 overflow: hidden 或 text-overflow: ellipsis 防崩。
和 grid-template-rows 混用时的优先级陷阱
如果同时写了 grid-template-rows: 100px 200px 和 grid-auto-rows: minmax(120px, auto)，注意：前者只管前两行，后面所有新增行都走后者规则。但很多人误以为 grid-template-rows 会“覆盖”或“影响”后续行——它完全不参与隐式行计算。
常见翻车点：
- 写了
grid-template-rows: repeat(3, 1fr)，结果只显示 3 行，多余项被截断或堆叠——因为没配grid-auto-rows，隐式行没了定义 - 想让前两行固定高、后面自适应，却把
grid-auto-rows写成1fr，导致容器无高度约束时布局塌陷 - 用
grid-row: 1 / -1把某个广告位跨所有行，但忘了它会占据显式 + 隐式行，可能把后续内容全挤到下一列
动态插入新项时 grid-auto-rows 不生效？检查这几个地方
JS 动态添加 <li> 后发现新项没按预期高度排布，大概率不是 grid-auto-rows 失效，而是以下任一环节卡住：
- 父容器没设
display: grid—— 新增元素只是普通块级元素，Grid 规则压根不触发 - 新增项加了
grid-row或grid-column，显式定位后就脱离自动行分配逻辑 - 父容器用了
grid-auto-flow: column，此时grid-auto-rows仍生效，但新项是按列填的，视觉上像“跳行” - CSS 优先级冲突：比如某条规则写了
li { height: 80px }，硬性覆盖了 Grid 的行高计算
最稳妥的调试方式：临时给父容器加 outline: 1px solid red，再打开开发者工具看新增项是否真在网格内；如果不是，说明它没被 Grid 容器“收编”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
