grid-template-rows: auto 并非每行独立自适应，而是由该行最高项决定整行高度；真正各行互不影响需依赖 grid-auto-rows + minmax(min-content, auto) 控制隐式行，同时确保子项未设 overflow: hidden 等限制高度的样式。
grid-template-rows: auto 不等于每行独立自适应
很多人写 grid-template-rows: auto，以为就能让每行按自己内容撑开——结果发现所有行高度被拉齐了。这是因为 auto 在显式轨道中只表示“由该行最高项决定”，同一行内所有项仍会等高拉伸，不是“各行互不干扰”。真正要的是**每行各自算高度、互不影响**，得靠隐式行轨道 + 合理的 grid-auto-rows 配置。
用 grid-auto-rows + minmax(min-content, auto) 控制新增行
当网格项数量不确定（比如动态插入、列表渲染），显式定义的 grid-template-rows 不够用，必须依赖隐式行轨道。此时 grid-auto-rows 才起效：
-
grid-auto-rows: minmax(min-content, auto)是最稳妥的选择：保证每行至少容纳内容最小高度，又能随内容增长； - 避免写
grid-auto-rows: min-content—— 它在 Firefox 里可能退化为auto，且对含padding或flex子项响应弱，容易塌缩； - 别用
grid-auto-rows: 1fr或固定值（如60px），前者会抢空间，后者会导致溢出或截断； - 如果某行需上限控制，可用
minmax(min-content, 3em)，但注意em基于父元素字体大小，不是子项。
显式行 + auto-fit/auto-fill 场景下怎么设行高
当你用 repeat(auto-fit, minmax(200px, 1fr)) 做列布局时，行数是动态的，grid-template-rows 无法预设全部行。这时：
- 显式行（如
grid-template-rows: minmax(min-content, auto)）只影响你写出来的那几行； - 后续自动产生的行全由
grid-auto-rows决定，所以必须显式声明它； - 不要指望
grid-template-rows: repeat(5, minmax(min-content, auto))能覆盖所有情况——超出 5 行的部分仍走隐式轨道； - 若想所有行都“紧凑但可撑开”，统一用
grid-auto-rows: minmax(min-content, auto)，并把grid-template-rows留空或设为none更干净。
为什么子项 overflow: hidden 会让 min-content 失效
写了 minmax(min-content, auto) 却看到行高为 0 或文字被裁，大概率是子项本身限制了内容展开：
- 子元素设了
overflow: hidden或text-overflow: ellipsis，浏览器计算min-content时取不到真实内容高度； - 父容器有
height: 0、max-height: 0或display: contents等干扰布局的样式； - 图片或 iframe 没设
height: auto或max-width: 100%，其固有尺寸撑大了min-content计算值； - Firefox 对嵌套 flex 容器里的
min-content解析更保守，建议加align-items: start或显式min-height: 0辅助。
关键点就一个：min-content 不是万能 content-fit，它依赖子项自身是否“愿意暴露高度”。真正起作用的是整个链路——子项可伸展、容器不限高、隐式轨道有定义、浏览器支持到位。漏掉任一环，都会看起来“没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
