grid-template-rows: auto 使行高由最高子项撑开，非各子项独立适应；min-content/max-content 才真正实现内容驱动高度，分别取换行最小/不换行最大所需高度。
grid-template-rows: auto 与 min-content / max-content 的区别
行高「自动适应」不等于「全部设为 auto」。用 grid-template-rows: auto 是最简方案，但它的行为是「由该行内最高子项内容撑开」，不是「每项各自按自己内容高度渲染」——因为 Grid 默认对齐方式是 align-items: stretch，子项仍会被拉伸填满整行（除非显式设了 align-self: start 或 min-height: 0）。
真正控制「内容驱动高度」的关键词是：min-content 和 max-content：
-
min-content：该行高度取所有子项「换行后最小所需高度」，适合文字多、需紧凑排列的场景 -
max-content：该行高度取所有子项「不换行时最大所需高度」，适合单行标题类内容 - 混合写法如
grid-template-rows: min-content 1fr很实用：首行紧贴内容，后续区域均分剩余空间
为什么 grid-auto-rows 不影响已有行？
很多人写了 grid-auto-rows: 80px 却发现前几行还是高低不一——这是因为 grid-auto-rows 只管「隐式行」，也就是子项数量超过你用 grid-template-rows 显式定义的轨道数时，Grid 自动补出来的那些行。
如果你写了 grid-template-rows: 100px 200px，那前两行就完全不受 grid-auto-rows 控制；只有第 3 行及以后才按你设的 80px 来。
立即学习“前端免费学习笔记（深入）”；
想让所有行统一等高又自适应？别依赖 grid-auto-rows，改用：
-
grid-template-rows: repeat(auto-fit, 120px)（固定高度，自动算列数） -
grid-template-rows: repeat(3, 1fr)（容器必须有明确 height，否则1fr退化为auto） - 或者直接放弃等高，用
grid-template-rows: repeat(3, auto)让每行独立撑开
子项内容顶高整行？先查这三个地方
即使你设了 grid-template-rows: repeat(3, 100px)，某一行还是被顶得很高，大概率不是 Grid 的问题，而是子项自己「不守规矩」：
- 子项写了
min-height: auto或height: fit-content，会禁用默认的stretch对齐 - 子项内部用了
display: flex，但没设align-items: stretch，导致内部元素不拉伸，外层 Grid 就按内部实际高度算 - 图片没加
max-width: 100%; height: auto，或文字没限制line-clamp，造成内容溢出撑高行
调试时打开浏览器 Layout 面板，勾选「Highlight grid tracks」，再逐个点子项看 Computed 中的 height、min-height、align-self，比猜快得多。
响应式多行布局别硬套 auto-fill 到 rows
repeat(auto-fill, minmax(160px, 1fr)) 在 grid-template-columns 里效果很好，但直接挪到 grid-template-rows 几乎无效——因为容器高度通常不固定（比如 min-height: auto），Grid 没法反向推算该生成多少行。
真要按容器高度动态算行数，目前没有纯 CSS 的可靠方案。更现实的做法是：
- 用 Flex 布局替代：设置
flex-direction: column+flex-wrap: wrap+ 容器设height，再配合 JS 监听 resize 动态调整flex-basis - 或者接受「列方向自适应」，把原本想放成多行的内容，改为多列+横向滚动（
overflow-x: auto） - CSS Container Queries 还在演进中，暂不推荐作为主力方案
Grid 的强项是二维可控布局，不是高度驱动的流式换行；强行让它干 Flex 的活，最后往往要兜底加 JS。
