auto在grid-template-rows中不自适应，因其仅按初始化时各子项min-content高度最大值静态计算一次，不响应后续内容变化；真正自适应需用minmax(min-content, max-content)或minmax(0, max-content)。
直接用 auto 不行——它只取初始化时的 min-content 高度，之后内容变多（比如图片加载、文字展开）它也不会再撑高。
为什么 auto 在 grid-template-rows 里不“自适应”
auto 的语义是“按该行所有 grid item 的 min-content 高度最大值”一次性计算，之后就固定了。不是监听内容变化的响应式行为。
- 常见错误现象：某行放了一段可展开文本，初始收起时高度正常；点击展开后，文字溢出或被截断，但行高没变
- 浏览器开发者工具里能看到该轨道边界没扩大，
outline: 1px solid red一试便知 - 如果某个
grid item用了display: contents，它的min-content高度会退化为0，整行可能塌成一条线
真正让行高随内容伸缩的写法是 minmax(min-content, max-content)
这是目前最可靠、兼容性最好（Chrome 66+、Firefox 61+、Safari 14+）的方案，它定义了一个范围：最小不小于内容自然高度，最大能撑到完整内容所需高度。
-
minmax(min-content, max-content)：适合标题+短描述这类结构，紧凑但不挤压 -
minmax(0, max-content)：更激进，允许从“视觉上消失”拉伸到全高，适合折叠/展开卡片 - 避免写
minmax(min-content, 1fr)——这会让该行抢走剩余空间，破坏其他1fr行的分配逻辑 - 如果子项有
padding、line-height或border，它们会影响min-content计算，建议显式重置：margin: 0; line-height: 1.4;
隐式行（grid-auto-rows）不能直接用 min-content
grid-auto-rows: min-content 在所有浏览器中都会被忽略，降级为 auto。想让自动创建的行也自适应，必须写成：
grid-auto-rows: minmax(min-content, auto);
-
minmax(min-content, auto)是grid-auto-rows场景下的事实标准写法 - 别用
max-content单独设grid-auto-rows——不同行内容高度差异大会导致布局跳动 - 若需统一最小高度兜底，写成
minmax(60px, auto)更稳，比纯auto少受字体渲染差异影响
最易被忽略的一点：Grid 行高自适应本质不是“内容驱动”，而是“轨道尺寸策略”。你得明确区分哪些行是显式定义的（用 grid-template-rows）、哪些是隐式生成的（靠 grid-auto-rows），二者生效机制完全不同，混用 auto 和 minmax() 时优先级和计算时机也会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
