grid-auto-rows 是虚拟滚动的硬性前提，因其决定隐式行高度以预估 scrollheight，确保滚动条比例准确、定位不跳变；设为 minmax(120px, auto) 最稳，而 auto 或省略会导致视口抖动、scrolltop 失准。
纯 CSS 无法实现真正的虚拟列表，grid-auto-rows 是唯一能配合 JS 做好虚拟滚动的 Grid 属性，但它必须显式设置，且不能依赖内容撑开。
为什么 grid-auto-rows 是虚拟滚动的硬性前提
浏览器需要靠它预估整张列表的总高度（scrollHeight），才能让滚动条比例准确、滚动定位不跳变。如果设为 auto 或直接省略，Grid 会等每个项渲染后才测量高度，新项插入时行高突变，导致视口抖动、动画卡顿、scrollTop 计算失准。
-
grid-auto-rows: minmax(120px, auto)是最稳选择：保证最小可读性，长文本或图片多时自然撑开，不截断也不留白 - 所有项高度严格一致时可用
grid-auto-rows: 120px，但要确保子项没设min-height、align-self: start等破坏拉伸的行为 -
grid-auto-rows: 1fr在无明确容器高度时会退化为auto，彻底失效
别用 grid-template-rows + repeat(auto-fill) 替代
grid-template-rows 只定义显式轨道，而虚拟列表中绝大多数项都落在隐式行里——因为 auto-fill 的轨道数由容器宽度决定，和数据总量无关。一旦超出显式轨道，后续项进入隐式行，若没设 grid-auto-rows，默认回退到 auto，高度一致性立刻崩塌。
- 开发者工具 Layout 面板勾选 “Highlight grid tracks”，实线是显式行，虚线是隐式行
- 显式行不管数据多长，只管你写死的那几行；隐式行才是超长列表的主力承载区
-
grid-auto-rows是隐式行的唯一控制开关，没它就等于没锚点
JS 渲染逻辑与 Grid 容器的协作边界
Grid 只负责按行高排布已挂载的 DOM，不参与数据切片、不监听滚动、不决定哪些该 render。JS 必须实时算出三组值：startIndex、endIndex、offset（整体 translateY 偏移），然后批量挂载/卸载真实 DOM 节点。
- 外层容器需设固定
height和overflow-y: auto，否则滚动事件不触发 - 每项必须设
grid-row显式指定行位置（如grid-row: 100 / 101），避免 Grid 自动分配打乱顺序 - 禁用
justify-items: center或align-items: center等居中类属性，它们会让项在行内居中，破坏 translateY 定位精度
真正卡顿的根源往往不是 Grid 本身，而是 JS 没做节流、DOM 挂载未批处理、或子项内嵌了未约束高度的 flex 容器——这些都会让 grid-auto-rows 失效，哪怕你把它写得再规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
