grid-auto-rows是虚拟滚动中行高一致性的底层锚点，必须显式定义；省略或设为auto会导致滚动跳动、scrollheight失准及动画卡顿，minmax(120px, auto)为最稳选择。
grid-auto-rows 是虚拟滚动中行高一致性的底层锚点
纯 CSS 实现虚拟滚动时，grid-auto-rows 不是可选项，而是必须显式定义的基准。它让浏览器在渲染“可视窗口内那几十个项”时，能准确推算出每个项该落在哪一行、占据多高——哪怕你用 JS 只挂载了 20 个 DOM 节点，Grid 仍需知道第 1000 行该有多高，才能正确滚动定位。
省略 grid-auto-rows 或设为 auto，会导致：滚动到新位置时，新插入项高度由内容撑开，相邻行突然变高，视口跳动；浏览器无法预估总高度（scrollHeight 失准），滚动条缩放异常；CSS 动画或 transition 在高度突变时卡顿甚至中断。
-
grid-auto-rows: minmax(120px, auto)是最稳选择：保证最小可读性，长文本/图片多时自然撑开，不截断也不留白 - 避免
grid-auto-rows: 1fr：容器无明确height或min-height时，1fr退化为auto，失去控制力 - 若所有列表项高度严格一致（如图标+单行文字），可用
grid-auto-rows: 120px，但需确保子项内无min-height、align-self: start等破坏拉伸的行为
为什么不能靠 grid-template-rows + repeat(auto-fill) 替代
grid-template-rows: repeat(auto-fill, 120px) 看似能替代 grid-auto-rows，但它只生成“显式轨道”，而虚拟滚动中，绝大多数项都落在隐式行里——因为 auto-fill 生成的轨道数由容器宽度和单列宽决定，与列表总长度无关。一旦列表项超出显式轨道数，后续项就进入隐式行，此时若没设 grid-auto-rows，默认回退到 auto，一致性立刻崩塌。
- 显式行（
grid-template-rows定义）只管你写死的那几行，不随数据量扩展 - 隐式行（自动创建）才是超长列表的主力承载区，
grid-auto-rows是它的唯一控制开关 - 开发者工具 Layout 面板中勾选 “Highlight grid tracks”，一眼就能看出哪些是虚线（隐式）、哪些是实线（显式）
动态插入项时 grid-auto-rows 不生效？先查这三处
JS 插入新项后发现高度错乱，大概率不是 grid-auto-rows 失效，而是它被其他样式覆盖或绕过：
- 子项设置了
height、min-height或max-height：尤其是min-height: auto会禁用 Grid 默认的stretch对齐，导致行高失控 - 子项用了
display: flex但没设align-items: stretch，内部内容不拉伸，外部 Grid 行高计算失准 - 父容器有
align-items: start或子项设了align-self: start：这会让项顶部对齐而非拉伸填满整行，视觉上像“行变矮”，实际是项没占满
临时加一句 * { outline: 1px solid #f00 !important; }，能快速暴露真实边界，比猜更准。
和 grid-auto-flow dense 搭配时的高度陷阱
瀑布流类虚拟滚动常启用 grid-auto-flow: row dense 来填空，但它会打乱 DOM 顺序填充，进而影响 grid-auto-rows 的应用逻辑：dense 回填的项可能落入已存在的隐式行，也可能触发新隐式行创建——此时新行是否受同一 grid-auto-rows 控制？答案是肯定的，但前提是这些项**没有被显式定位**（比如没写 grid-row）。一旦某项用了 grid-row: 3 / 5，它就脱离 grid-auto-rows 管辖范围。
- 密集回填本身不改变
grid-auto-rows规则，但会让“哪些项走自动布局”变得难预测 - 如果部分项需要跨行（如广告位），务必用
grid-row-end: span X显式声明，避免 dense 把小项塞进大项预留的空隙，引发高度挤压 - 开启 dense 后，务必配合
overflow: hidden和text-overflow: ellipsis，防止某项内容意外溢出顶高整行
真正难处理的不是 grid-auto-rows 写不对，而是它被子项自己的尺寸策略悄悄覆盖——盯着 Computed 面板里的 height、min-height、align-self 这三项，比反复调 grid-auto-rows 值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
