grid-auto-rows: min-content 不影响容器高度，只控制隐式行高度；容器需移除 height/min-height 等限制并避免父容器拉伸，才能真正贴合内容。
grid-auto-rows: min-content 为什么没让容器高度收缩？
grid-auto-rows: min-content 并不控制网格容器（grid container）自身的高度，它只决定**自动创建的行轨道（implicit rows）的高度计算方式**。如果容器本身设置了 height、min-height，或父容器有约束，那再怎么设 grid-auto-rows 都不会让容器“自适应内容高度”。真正起作用的是容器的 **block size 行为** —— 也就是它在文档流中如何响应子项尺寸。
让 grid 容器真正“贴着内容”需要什么？
核心是：移除所有强制高度限制，并确保容器没有被其他 CSS 拉伸或撑开。常见干扰项包括：
-
height、min-height、max-height等显式尺寸声明 - 父容器设置了
display: grid或display: flex且未配align-items: start - 容器启用了
grid-template-rows（它会覆盖grid-auto-rows对显式行的影响） - 子项用了
align-self: stretch（默认值），在某些父容器约束下会反向撑高容器
只要容器是普通文档流中的块级元素，且没被外部约束，它天然就会包裹子项——此时 grid-auto-rows: min-content 才能按需生成紧凑的隐式行。
min-content 在 grid-auto-rows 中的实际效果
min-content 让每条自动创建的行，高度等于该行中所有网格项的**最小内容高度（min-content contribution）**，即不换行、不限宽时，内容自然撑开的高度。它适合文字短、图片小、无固定高子项的场景；但对设置了 height 或 min-height 的子项无效——那些子项会按自身规则贡献高度，min-content 不会强行压扁它们。
立即学习“前端免费学习笔记（深入）”；
对比常用值：
-
grid-auto-rows: auto→ 行高由子项的height/min-height或内容决定（更常见、更稳） -
grid-auto-rows: min-content→ 强制按“最窄内容宽度下”的自然高度算，可能比auto更小，但也更难预测（尤其含内联元素或 font-metrics 时） -
grid-auto-rows: max-content→ 按“无限宽”下的内容高度，通常更大
一个可验证的最小示例
下面这段代码能让容器严格贴合内容，且第三行（隐式行）用 min-content 计算：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content; /* 只影响第3行及之后的隐式行 */
gap: 8px;
/* 不要写 height/min-height */
}
<p>.item {
background: #eee;
}</p><p>/<em> 第三行是隐式创建的，它的高度由 min-content 决定 </em>/</p>如果前两行已用 grid-template-rows 显式定义，那 grid-auto-rows 就完全不影响它们——这点很容易被忽略。
真正卡住人的往往不是 min-content 本身，而是忘了容器高度是由外而内决定的，不是由网格轨道反推的。
