grid-auto-rows仅作用于隐式网格行，不撑满容器；需用grid-template-rows显式定义或结合auto-fill/auto-fit实现等高填满，跨行和动态增删会破坏1fr均分效果。
grid-auto-rows 为什么不能填满容器高度
直接设 grid-auto-rows: 1fr 不会撑开整个容器，它只作用于「隐式网格行」——也就是你没在 grid-template-rows 里明确定义、但内容多到溢出时自动生成的那些行。如果所有子项都在显式定义的行里（比如用了 grid-row: 1 / -1），grid-auto-rows 根本不生效。
常见错误现象：display: grid; grid-auto-rows: 1fr; 后内容堆在顶部，底部大片留白。
- 先确认是否真有隐式行产生：删掉部分子元素，看剩余项是否自动拉伸；没变化就说明没触发隐式行
- 想让所有行等高且填满容器，优先用
grid-template-rows: repeat(auto-fill, minmax(200px, 1fr))这类显式定义 -
grid-auto-rows真正适用场景是：不确定子项数量、且允许它们逐行自然堆叠（如卡片流、日志列表）
auto-fill 和 auto-fit 在 grid-template-rows 里怎么选
这两个关键字控制的是「显式网格轨道」的生成逻辑，和 grid-auto-rows 配合使用时特别容易混淆。
使用场景：响应式卡片布局，希望每行尽可能塞满，空余空间均分给已有列/行。
-
auto-fill：不管有没有内容，只要满足minmax()条件就生成轨道；可能导致大量空行 -
auto-fit：生成轨道后，把空轨道的尺寸合并进已有轨道（即“收缩空行”），更省空间 - 性能影响：
auto-fill可能创建数百个空轨道，尤其配合大max-content时，拖慢渲染；auto-fit更安全 - 注意：二者只对
grid-template-rows或grid-template-columns生效，grid-auto-rows不接受它们
内容过多时 grid-auto-rows + overflow-y 的协作陷阱
当项目数远超视口，靠 grid-auto-rows 拉出几百行再加 overflow-y: auto，滚动会卡顿——浏览器要为每一行计算布局，即使很多行不可见。
错误做法：grid-auto-rows: 80px; max-height: 500px; overflow-y: auto;，子项超 50 个就开始明显掉帧。
- 真实可用方案：用
grid-auto-rows: minmax(0, 80px)替代固定值，允许行高弹性压缩，缓解溢出压力 - 更彻底的解法：放弃纯 CSS Grid 渲染全部内容，改用虚拟滚动（如
react-window或原生 IntersectionObserver + 动态增删 DOM） - 兼容性提醒：
minmax(0, Npx)在 Safari 15.4 以下不支持，需降级为固定值或 JS 补偿
grid-auto-rows 值写成 1fr 之后子项高度不一致？
这是最常被忽略的细节：1fr 是按「可用空间均分」，但前提是这些行都属于同一组隐式行。而一旦某子项设置了 grid-row: span 2，它跨过的第二行就变成“隐式行”，但它的高度由第一行决定，后续 1fr 不再参与分配。
典型表现：前几行高度正常，中间某行突然变矮或撑高，滚动时错位。
- 检查所有子项的
grid-row是否含span或跨行范围（如2 / 4） - 避免混用：要么全用显式
grid-template-rows控制，要么所有子项严格单行、不用跨行 - 调试技巧：临时加
outline: 1px solid red到子项，看清实际占据的网格区域
复杂点在于：grid-auto-rows 从不主动“重排”已存在的隐式行，它只对新插入的内容生效。所以动态增删子项时，旧行高度不会自动同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
