grid-auto-rows 设置的是隐式行轨道尺寸而非子元素高度；它决定新增行的高度规则，子元素在其中的对齐与溢出由 align-items、min-height 等控制。
grid-auto-rows 设的不是“高度”，而是“轨道大小”
很多人以为 grid-auto-rows 是给每个新插入的项设固定高，其实它定义的是**隐式行轨道（implicit row track）的尺寸**——也就是当内容超出显式网格（grid-template-rows）时，Grid 自动创建的新行的高度规则。
这意味着：它不控制单个子元素的 height，也不响应子元素内部内容撑开；它只决定“这一行轨道有多高”，而子元素在该轨道内如何对齐、是否溢出，还得看 align-items、justify-content 或自身 min-height 等。
- 设成
grid-auto-rows: 1fr→ 新增行会均分剩余空间（适合容器高度固定） - 设成
grid-auto-rows: minmax(40px, auto)→ 每行至少 40px，有内容就自动撑开（推荐用于动态文本卡片） - 设成
grid-auto-rows: 80px→ 所有隐式行强制 80px，内容超长会被裁剪或溢出（容易踩坑）
动态插入项目后高度不自适应？先检查 grid-template-rows 是否“锁死”了显式行
常见现象：grid-auto-rows 写了 minmax(min-content, max-content)，但新增项目还是被压扁或溢出。问题往往出在显式网格定义上。
如果用了 grid-template-rows: 100px 100px 这类固定行数+固定尺寸的写法，那前两行是显式轨道，后续插入的项目全掉进隐式轨道——但如果你忘了设 grid-auto-rows，浏览器默认用 auto（即“由内容决定”，看似合理，实则受父容器 height 和 overflow 影响极大）。
立即学习“前端免费学习笔记（深入）”；
- 显式行写死了数量？改用
grid-template-rows: repeat(auto-fit, minmax(48px, 1fr)))更灵活（配合grid-auto-rows反而可能冗余） - 想保留显式结构（比如 header / main / footer），又允许中间区域动态加项？那就必须配
grid-auto-flow: row（默认值） +grid-auto-rows: minmax(48px, max-content) - 父容器没设
height或设了height: 0？隐式轨道会坍缩——grid-auto-rows再合理也没用
内容撑不开 grid-auto-rows？可能是子元素 min-height 或 align-items 在干扰
即使 grid-auto-rows: minmax(40px, max-content) 写对了，新插入的 <div> 仍显示为一条细线。典型原因是子元素自己没“主张”。
Grid 轨道高度确定后，子元素默认按 align-items: stretch 拉伸填满整行——但如果子元素写了 min-height: 0、height: 0，或外层有 display: contents，拉伸就会失效。
- 确保子元素没意外设置
height、min-height或max-height - 检查是否父 Grid 容器设了
align-items: start——这会让所有子项顶部对齐，且不拉伸，高度完全由子项自身内容决定 - 子项内是 flex 布局？注意
flex: 1在非拉伸轨道里无效；换成height: 100%或显式min-height: 100%更可靠
React/Vue 中动态添加节点后 grid-auto-rows 不生效？别忘了 key 和重排时机
框架里新增 DOM 节点，视觉上没反应，不是 CSS 问题，而是渲染时机或 key 冲突导致浏览器没触发 Grid 重布局。
Grid 的隐式轨道生成依赖于子元素的插入顺序和位置。如果新节点 key 重复、或用 v-if/useState 切换时 DOM 被复用（而非真实新增），浏览器可能复用旧轨道，跳过 grid-auto-rows 计算。
- 确保每个动态项有稳定唯一
key（不要用index） - 避免在插入瞬间同时修改容器
height或overflow——这会打断 Grid 布局流程 - 极端情况可手动触发重排：
el.offsetHeight（读取布局后立刻写入新节点），但应作为最后手段
真正难的不是写对 grid-auto-rows，而是理解它只管“轨道”，不管“内容”。一旦子元素自身高度逻辑和 Grid 对齐行为混在一起，问题就藏在看不见的地方。
