grid-auto-rows 必须显式设置，否则隐式行高度失控；推荐用 minmax(120px, auto)，配合 grid-auto-flow: column 实现新增项到底部，同时需确保父容器有高度、子元素无 height: 0 等限制。
grid-auto-rows 不设就塌，不是“可选”而是“必填”
动态列表项一加就高度乱飞、行高不均、视觉割裂？根本原因不是内容问题，而是grid-auto-rows被漏写了。它专管隐式行（即超出grid-template-rows定义范围后自动创建的行），省略后浏览器默认用auto——等于把高度完全交给内容撑，结果就是：带图片的项顶高整行，纯文本的项缩成一条线。
必须显式设置，且推荐用minmax(120px, auto)：
-
120px保证最小可读高度，防文字挤成一团 -
auto允许内容自然撑开，不裁剪、不断行 - 别用
max-content，除非你明确要保留超长 URL 不折行——它会把整行顶得极高 - 若容器有固定高度（如
height: 600px），才考虑1fr；否则1fr直接失效
grid-auto-flow: row 默认行为会让新项“插队”，不是追加到末尾
列数固定为 3，已有 7 个子项（铺满两行剩 1 个），再 JS append() 第 8 个，它却出现在第二行第 2 列——这不是 bug，是grid-auto-flow: row（默认值）的正常逻辑：按行优先填空位，而非追加到视觉末尾。
解决方法不是调grid-template-rows，而是换策略：
- 想严格追加到底部？改用
grid-auto-flow: column，新项会按列向下填，天然形成“新增即到底”效果 - 想填空位但不怕顺序错乱？
grid-auto-flow: row dense能回填，但慎用：屏幕阅读器仍按 DOM 顺序读，布局顺序错位会导致语义错误 - 所有项都无手动
grid-row/grid-column定位时，row和column差异才真正显现；一旦某项用了grid-row: 1 / -1跨行，后续项位置更难预测
动态插入后高度不生效？先看父容器和子元素有没有“拖后腿”
grid-auto-rows: minmax(120px, auto)写对了，新项还是扁得看不见？问题往往不在 Grid 本身：
- 父容器没设
height或height: 0→ 隐式轨道坍缩，再好的规则也无效 - 子元素自己写了
min-height: 0、height: 0或display: contents→ Grid 的align-items: stretch拉伸失效 - 用了
grid-template-rows: 100px 100px这种固定行数写法 → 前两行是显式轨道，后面全掉进隐式轨道，此时grid-auto-rows才真正起作用；但若忘了设它，隐式行就回归auto失控状态
混合静态定位与动态项时，grid-row 定位会“吃掉”隐式行空间
在动态列表里插入一个广告位，用grid-row: 2 / 4把它卡在第二、三行之间？注意：这个定位不仅占显式行，还会占据隐式行轨道。如果后续 JS 插入新项，它们可能被整个挤到下一列，而不是往下顺延。
关键点：
-
grid-row: 1 / -1这种跨全部行的写法，会同时占用显式 + 所有已生成的隐式行，极易导致布局错位 - 显式定义的
grid-template-rows只管前 N 行，和grid-auto-rows完全无关；两者混用时，前者不覆盖后者，也不影响隐式行计算 - 想让前两行固定、中间区域动态增长？结构上应分离：header / main（设
grid-auto-rows）/ footer，避免用grid-template-rows锁死整体行数
grid-auto-flow和grid-auto-rows的协同节奏——前者决定新项往哪“落”，后者决定它“坐多高”，而父容器高度、子元素自身约束、显式轨道定义，全都在暗处牵制这两者的实际表现。稍一松动，视觉就偏移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
