Grid容器默认自动撑高，无需额外设置；常见不撑开原因是height/max-height、overflow:hidden、absolute定位或min-height:0等干扰；推荐用min-height保障底线高度，避免设height:auto。
父元素高度随内容变化是 Grid 布局的默认行为，不需要额外“撑开”——只要没设置固定高度（如 height: 300px）或 overflow: hidden 等限制，Grid 容器天然会自动适应子项内容高度。
确认没有意外限制高度
常见导致父元素“不撑开”的原因不是 Grid 本身，而是其他 CSS 干扰：
-
显式设置了
height或max-height：删掉或改为min-height； -
父容器或祖先元素有
overflow: hidden | auto且高度受限，会裁剪内容； -
子项用了
position: absolute：脱离文档流，Grid 不再将其计入高度计算； -
Grid 容器设了
display: grid但同时又设了height: 0或min-height: 0（尤其在 Flex/Grid 嵌套中容易误设）。
用 min-height 设最低高度（推荐）
如果希望容器至少显示一定高度（比如占满视口、留白、适配卡片布局），用 min-height 更安全：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
min-height: 200px; /* 内容少时也保持最小高度 */
/* 不写 height，让内容自然撑开 */
}这样既保留自适应能力，又满足视觉底线要求。
立即学习“前端免费学习笔记（深入）”；
避免滥用 height: auto
height: auto 是块级元素默认值，对 Grid 容器**无需手动设置**。写上不仅多余，还可能被后续规则覆盖或引发误解。真正需要的是“不设死高度”，而不是主动写 auto。
子项内容溢出时的处理
如果子项内有长文本、图片或未约束尺寸的元素，导致高度异常增大，可针对性控制：
- 给文本容器加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;（单行）； - 图片加
max-width: 100%; height: auto;防止撑破网格； - 用
grid-auto-rows: minmax(min-content, max-content)让行高更灵活（适用于动态行数）。
