Grid嵌套高度塌陷主因是子级未继承父行高或内容脱离文档流，导致父容器无法正确计算高度；使用 grid-template-rows: auto 时，若子Grid无明确高度且内部布局异常，易触发塌陷；解决方法为结合 clearfix 创建BFC防止高度丢失，并设置子Grid height: 100%、min-height: fit-content 及 align-self: stretch，确保父行能感知子内容实际尺寸，双重保障避免塌陷。
Grid嵌套布局中出现高度塌陷，通常是因为子级Grid容器未正确继承父级行高或父容器未能自适应内部浮动/弹性内容。当使用 parent grid auto-rows 结合嵌套Grid时，若子Grid未显式设置高度，父行可能无法正确撑开，导致视觉上的“塌陷”。
理解问题成因
在CSS Grid中，父容器使用 grid-template-rows: auto 时，期望行高根据内容自动调整。但当子元素是另一个Grid且其内部发生布局脱离正常文档流（如使用绝对定位、浮动、或自身未约束高度），父行可能计算不到实际高度，造成塌陷。
使用clearfix类辅助块级格式化上下文
虽然Grid本身不依赖传统浮动，但在混合布局或嵌套场景中，clearfix仍可帮助创建独立的块级格式化上下文（BFC），防止外边距重叠或高度丢失。
定义一个简单的clearfix工具类：
.clearfix::after {
content: "";
display: block;
clear: both;
}
将该类应用于嵌套的子Grid容器，确保其作为一个完整的块级单元被父Grid识别。
结合auto-rows与显式子Grid高度控制
仅靠clearfix不足以解决所有塌陷问题，还需确保子Grid能正确反馈高度。建议以下做法：
- 父Grid使用 grid-template-rows: auto，允许行高随内容伸缩
- 子Grid容器设置 height: 100% 或 min-height: fit-content
- 子Grid内部使用 align-self: stretch 撑满可用空间
- 必要时为子Grid添加 display: flex; flex-direction: column 作为备选方案
实际示例结构
.parent-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
<p>.child-grid-container {
width: 100%;
height: 100%; /<em> 关键：继承父行高度 </em>/
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}</p><p>.child-grid-container.clearfix::after {
content: "";
display: block;
clear: both;
}</p>在HTML中为子容器添加clearfix类，确保即使内部有复杂布局，也能触发正确的高度计算。
基本上就这些。关键是让父Grid的auto行能“感知”子内容的实际高度，通过高度继承+clearfix创建BFC，双重保障避免塌陷。不复杂但容易忽略细节。
