grid-template-rows: auto 不起作用是因为 auto 仅设为内容最小高度，不触发伸缩；应使用 minmax(auto, max-content) 或配合固定/弹性容器高度。
grid-template-rows: auto 为什么不管用
因为 auto 本身不是“自动撑开”的开关，它只是把行高设为“内容最小高度”，不触发弹性伸缩。真正起作用的是 minmax() 或显式设置为 1fr —— 但后者只在有剩余空间时才生效。
- 常见错误：写成
grid-template-rows: auto;就以为能随内容变高，结果子元素溢出或被截断 - 正确做法是用
grid-template-rows: minmax(auto, max-content);，既保底又不限高 - 如果父容器高度固定（比如
height: 400px），auto行会按内容收缩，而1fr才会拉伸填满 - 注意兼容性：
max-content在 Safari 14.1+ 和 Chrome 89+ 支持良好，旧版需降级为minmax(auto, 100vh)类似兜底
动态内容下 grid-auto-rows 的实际效果
grid-auto-rows 控制的是**隐式网格行**（即超出 grid-template-rows 定义数量后新增的行）的高度，不是所有行都听它指挥。
- 场景：列表项数量不确定，用
display: grid; grid-template-columns: repeat(3, 1fr);布局，每项高度不一 - 若没设
grid-auto-rows，新增行默认高度为auto（即内容最小高度），看起来“正常”，但无法统一控制 - 设成
grid-auto-rows: minmax(100px, max-content);可确保每条新行至少 100px，又能撑开容纳长文本 - 性能提示：避免在大量动态项中用
max-content，可能触发频繁重排；可改用fit-content(500px)设上限
子元素 height: 100% 失效的典型原因
CSS Grid 中，子元素写 height: 100% 往往无效，不是代码写错了，而是缺少“高度传递链”。
- 根本问题：Grid 容器默认是
height: auto，其子项的100%没有参照物 - 解决路径只有两条：要么给容器设明确高度（如
height: 600px或min-height: 300px），要么让容器自身也参与弹性布局（如父级是display: grid; grid-template-rows: 1fr;） - 常见踩坑：在 React/Vue 动态渲染中，子组件内部用了
height: 100%，但外层 Grid 容器没有高度约束，结果白屏或折叠 - 替代方案：直接用
align-items: stretch（Grid 默认值），多数情况下比height: 100%更可靠
用 align-content: start 防止空行撑高容器
当 Grid 内容远少于预设行数时，align-content: stretch（默认值）会把空行平均拉伸，导致容器莫名变高。
- 现象：定义了
grid-template-rows: repeat(6, 1fr)，但只放了 2 个子项，容器高度却是预期的 3 倍 - 解法：加
align-content: start;，让所有行紧贴顶部排列，空行不占空间 - 注意：这不影响子项自身高度，只改变行轨道在容器内的分布方式
- 搭配建议：和
grid-auto-flow: row dense;一起用，可进一步优化动态插入时的空白分布
事情说清了就结束。真正麻烦的从来不是怎么写那行 minmax(auto, max-content)，而是得想清楚——你到底要“内容决定高度”，还是“容器预留空间等内容来填”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
