grid-template-rows: auto 不会导致项目高度不随内容撑开；它仅定义轨道基准尺寸，实际高度由内容、align-items、min-height等共同决定，需同时满足三要素才能真正自适应。
grid-template-rows: auto 会导致项目高度不随内容撑开？
不会。但很多人误以为 grid-template-rows: auto 就能“自动适应所有子项”，其实它只控制**轨道（track）的基准尺寸**，而真正决定子项高度的是其自身内容、align-items、min-height 等属性。当父容器设了固定高度或 grid-auto-rows 覆盖了隐式行时，auto 就可能被绕过。
关键判断点：检查是否用了 grid-auto-rows 或 grid-template-rows 显式定义了行高；再看子项是否设置了 height、min-height 或 overflow: hidden 这类压制伸展的样式。
让 grid 项目真正随内容自适应高度的三要素
必须同时满足以下三点，否则高度会被截断或塌陷：
-
grid-template-rows不写死像素/百分比（避免用100px、50%）；推荐auto、minmax(min-content, max-content)或留空让浏览器按需生成隐式行 - 子项自身不设
height、max-height，且min-height不为0（默认是auto，安全） - 父容器未设置
overflow: hidden或display: grid外层有高度限制（如 flex 容器设了align-items: start却没给足够空间）
动态内容下 grid 高度异常的典型修复方式
常见现象：新增文本后，某格内容溢出、换行失效、相邻格被压缩。本质是 grid 轨道未重计算高度。解决方向不是“强制刷新”，而是让布局机制自然响应：
立即学习“前端免费学习笔记（深入）”；
- 对单个 grid 项目，加
align-self: start（避免受align-items: stretch拉伸干扰） - 若项目含多行文本，确保
white-space: normal（而非nowrap）且未设line-clamp - 在 JS 动态插入内容后，可触发一次
grid重排：给父容器临时加transform: translateZ(0)再移除（仅必要时） - 更稳妥的做法是用
minmax(min-content, max-content)替代auto，尤其在内容高度差异大时
一个可靠自适应 grid 布局示例
下面这个结构能稳定响应任意长度文本，无需 JS 干预：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(min-content, max-content);
gap: 1rem;
}
<p>.item {
padding: 0.75rem;
border: 1px solid #ddd;
/<em> 不设 height / min-height </em>/
/<em> align-self 默认 stretch，如需顶部对齐可加 align-self: start </em>/
}注意：grid-auto-rows 控制隐式行（即超出 grid-template-rows 定义的额外行），而 minmax(min-content, max-content) 比单纯 auto 更明确告诉浏览器：“按内容最小所需高度起步，允许撑到最大内容高度”。这是多数动态场景最稳的选择。
真正容易被忽略的是父容器外层的约束——比如把 grid 放进一个 flex 容器里，却忘了 flex-direction: column 下子项默认不占满高度，此时 grid 自身高度会坍缩，再怎么调内部参数也没用。
