grid-auto-rows: min-content 不能撑开卡片高度，因其仅约束行轨道最小固有高度，而卡片若未参与尺寸计算（如含绝对定位、浮动）或处于 grid-template-rows 明确定义的布局中则完全不生效；真正有效的是 grid-template-rows: auto 配合子项不设固定高、文本流式布局及避免干扰渲染的 CSS 属性。
为什么 auto-rows: min-content 不能直接撑开卡片高度
很多人试过给网格容器设 grid-auto-rows: min-content，发现文本卡片高度还是塌陷或不随内容伸缩。根本原因是：min-content 在 grid 中只约束行轨道的“最小固有高度”，但若卡片本身没设置 height 或未参与尺寸计算（比如子元素浮动、绝对定位），它就无法触发重排。更常见的是把卡片当 grid-item 放进 grid-template-rows 明确定义的布局里——这时 grid-auto-rows 根本不生效。
真正起效的组合：用 grid-template-rows: auto + 子项不设固定高
高度自适应的关键不在 auto-rows，而在让网格行轨道按内容自然伸展。正确做法是：
- 父容器用
display: grid，且明确写grid-template-rows: auto（不是auto-rows） - 卡片元素作为直系子项，**不设置
height、max-height或overflow: hidden** - 内部文本用常规流式布局（避免
position: absolute或display: flex且未设flex-direction: column时子项高度失控） - 如果卡片含图标/头像等非文本元素，确保它们也参与高度计算（比如不用
float，改用display: inline-block或grid布局）
示例结构：
.card-grid {
display: grid;
grid-template-rows: auto; /* 关键 */
gap: 1rem;
}
.card {
/* 不写 height / max-height */
padding: 1rem;
border: 1px solid #ccc;
}
.card p {
margin: 0;
line-height: 1.5;
}
遇到换行截断或高度卡死？检查这三处
即使用了 grid-template-rows: auto，卡片仍可能高度异常，常见于：
-
white-space: nowrap或text-overflow: ellipsis用在卡片内文本上 —— 这会阻止换行，导致高度只够一行，必须配合width和overflow: hidden才生效，但会牺牲自适应 - 卡片内用了
display: flex且子项设了flex: 1—— 它会拉伸占满剩余空间，但若父容器高度未定，反而造成循环依赖，此时应改用align-items: start或显式设min-height: 0 - 外部框架（如 Vue/React 组件库）给卡片加了
contain: layout或will-change: transform—— 这些会隔离渲染上下文，阻碍高度传播，临时去掉就能验证
要不要用 min-content？只在特定场景有用
min-content 真正适用的场景极少，典型的是做“最小可读高度”的兜底，比如：
- 卡片内有一段标题 + 一段动态加载的富文本，希望标题始终可见，哪怕内容为空 —— 可对标题行设
grid-row: 1 / 2，内容区设grid-row: 2 / 3，再给第二行设grid-template-rows: min-content auto - 多列网格中，某列需严格按最短项对齐（如商品卡片底部按钮对齐），这时才用
grid-auto-rows: min-content配合align-content: start
日常文本卡片自适应，min-content 是干扰项，删掉更稳。
实际项目里，最易被忽略的是卡片内部的 overflow 和 flex 行为 —— 它们不像 CSS Grid 那样声明式，而是隐式影响尺寸链，调的时候得一层层查 computed styles 看 height 是怎么被锁死的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
