auto在grid-template-rows中按该行所有item的min-content高度最大值初始化轨道高度，不响应后续内容变化；真正自适应需用minmax(min-content, max-content)或minmax(0, max-content)。
grid-template-rows 中 auto 是什么行为
auto 在 grid-template-rows 里不是“撑开高度”，而是“按行内内容的**最大行内盒高度**（即该行所有 grid item 的 min-content 高度中的最大值）来设定轨道高度”。它不响应内容动态变化（比如文本换行、图片加载后尺寸变化），也不等同于 minmax(min-content, max-content)。
常见误解是写成这样：
grid-template-rows: auto auto 1fr;
结果发现某行内容变多后高度没变——因为 auto 只在布局初始化时取一次各 item 的 min-content 高度，之后就固定了。
真正让行高“随内容伸缩”的写法
要实现视觉上“内容多就高、内容少就矮”，得组合使用 minmax() 和关键字：
立即学习“前端免费学习笔记（深入）”；
-
minmax(min-content, max-content)：最小为内容最小高度（如单行文字），最大为内容自然高度（如多行换行后总高） -
minmax(0, max-content)：更激进，允许 item 高度从 0 拉伸到其完整内容高度（适合不确定内容量的卡片） - 避免单独用
auto做自适应，它语义上更接近“fit-content”而非“flexible”
例如一个标题+描述的卡片行：
grid-template-rows: minmax(min-content, max-content) minmax(0, max-content);
为什么 display: contents 会破坏 auto 行高
如果某个 grid item 内部用了 display: contents，它的子元素会“冒泡”进 grid 容器，导致该 item 不再产生盒模型，min-content 高度退化为 0。此时 auto 轨道可能塌陷成一条线。
- 检查是否误在 grid item 上设了
display: contents - 改用
display: block或包裹一层div保底 - 用浏览器开发者工具的 Layout 面板看该 item 是否还有 layout box
auto 和 fit-content、1fr 混用时的优先级陷阱
当 auto 和 1fr 同时存在，且内容超出容器时，auto 行不会被压缩——它会先按内容占满，再把剩余空间分给 1fr。但若内容极少，auto 行可能比你预期的还高，因为某些浏览器会把 auto 解释为 minmax(min-content, max-content) 的保守近似，而字体行高、padding、margin 都会影响 min-content 计算。
- 显式重置 item 的
margin和line-height，避免隐式撑高 - 用
grid-row: span 1确保 item 不跨行干扰高度计算 - 调试时临时加
outline: 1px solid red看真实轨道边界
auto 只是其中一环，真正灵活的方案永远依赖 minmax() + 明确的内容尺寸约束。 
