grid-auto-rows 必须显式设置，否则隐式行轨道会因默认 auto 行为导致塌陷或抖动；推荐使用 minmax(40px, auto) 保障最小高度且允许内容自然撑开。
grid-auto-rows 必须显式设置，否则新增项会塌陷或抖动
浏览器对隐式行轨道（JavaScript 动态插入超出 grid-template-rows 定义数量的项目时自动创建的行）默认使用 auto，但这不是“自适应”，而是“由内容决定 + 受父容器高度和溢出限制共同作用”的不稳定值。常见现象是：空卡片看起来消失了，加几行文字后整行突然撑开、页面跳动。
-
grid-auto-rows: minmax(40px, auto)是最通用解：保障最小可读高度（防文字挤成一线），又允许内容自然撑开 - 别写
grid-auto-rows: 60px——内容超长会被裁剪，且不响应字体缩放或行高变化 - 若容器有固定高度（如
height: 600px），可用grid-auto-rows: 1fr均分剩余空间，但仅限该场景；其他情况会把空行撑满视口
minmax() 中的 auto 不是万能的，得看它在哪个上下文里生效
minmax(60px, auto) 里的 auto 指的是“内容撑开的最大高度”，但它只在隐式轨道中起作用，且依赖子元素自身不设 height 或 overflow: hidden。如果子项写了 height: 100% 或 min-height: 0，反而会压制伸展行为。
- 子项内文本需保留自然流：避免
display: flex; flex-direction: column; height: 100%这类组合，它会锁死高度 - 想控制最大展开高度？用
max-height+overflow: hidden配合transition，而不是靠grid-auto-rows -
minmax(60px, max-content)更激进：确保撑到内容完整高度，但可能引发长文本无限拉伸，慎用于无行数限制的区域
动态插入后尺寸没变？先检查 grid-template-rows 是否“锁死”了显式行
如果你写了 grid-template-rows: 100px 100px，那只有前两行是显式轨道；第三、第四……所有后续插入项都归入隐式轨道——此时 grid-auto-rows 才管用。但如果忘了设它，浏览器就用默认 auto，而这个默认值在不同渲染环境下表现差异极大。
- 显式定义的行数越少，越要警惕隐式轨道失控：哪怕只写
grid-template-rows: 1fr，第二项也掉进隐式行 - 调试技巧：临时加
outline: 1px solid red到网格容器，观察新增项是否真的落在新行里（而非被压进已有行） - 不要指望
grid-template-rows: auto管所有行——它只管你写出来的那几行，不是全局开关
calc() 和 minmax() 混用容易在 Safari 中静默失效
虽然 minmax(calc(200px + 1rem), 1fr) 在 Chrome/Firefox 中能运行，但在 Safari 16.4 之前会直接忽略整条 grid-auto-rows 规则，导致回归默认 auto 行为——也就是塌陷或抖动的根源。
- 兼容旧 Safari 的稳妥做法：把 calc 提前算好，比如
minmax(216px, 1fr)（假设1rem = 16px） - 需要响应式弹性？优先用
minmax(200px, 1fr)或minmax(min-content, 1fr)，它们兼容性更好 - 真要动态计算且必须用 calc，改用 JS 获取
getComputedStyle后设内联样式：element.style.gridAutoRows = 'minmax(' + minHeight + 'px, auto)'
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
