1. 高度继承在 CSS Grid 的核心原理
1.1 什么是高度继承以及在网格中的表现
在普通的 CSS 布局中，高度通常不会自动从父元素继承，需要通过明确设置高度或使用 height: 100% 的方式来实现。对于 CSS Grid 来说，网格容器的高度与网格项的高度关系密切，而垂直方向上的高度继承更多地通过网格轨道的计算来实现。若设定了固定高度的网格容器，子项就可以通过 height: 100% 或 align-items: stretch 自动匹配轨道高度，从而达到“高度继承”的效果。
另外，网格项在垂直方向上会受到 align-items 和 align-self 的影响，其中 align-items: stretch 是默认值，它会把网格项拉伸以填满所在轨道的高度。这意味着即使子元素自身没有高度定义，网格项的高度也可能被父轨道高度所决定，从而产生一种间接的“继承感”。
/* 简单示例：网格容器高度固定，子项充满轨道高度 */
.grid {height: 60vh; /* 容器高度决定了轨道高度 */display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 2fr;gap: 12px;align-items: stretch; /* 子项将填满轨道高度 */
}
.grid > .cell {background: #eef;padding: 12px;/* height: 100%; 子项高度自动与轨道对齐，通常不需要显式声明 */
}
要点总结：只有当网格容器具有确定的高度时，fr 单位与轨道高度的计算才会稳定，子项通过 height: 100% 或默认的 stretch 机制实现“高度继承”的效果。
1.2 与 grid 容器高度的关系以及常见误区
一个常见误区是认为网格中的 fr 单位会直接“继承”父元素的高度而无需定义容器高度。实际上，fr 单位依赖于容器的可用高度，只有容器高度被明确或通过上下文确定时，fr 才能正确分配剩余空间。因此，在没有显式高度的情况下，fr 会把布局变成基于内容的高度，而非稳定的等分。
若要避免不可预期的高度变化，建议在网格容器上至少设置一个可确定的高度或最小高度，如 height: 60vh、min-height: 60vh，配合 grid-template-rows 的 fr 表达式来实现一致的分布。
/* 确保 fr 生效的一个写法示例 */
.grid {height: 70vh;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;align-items: stretch;
}
实务要点：在布局中持续关注容器高度是否明确，以及是否需要对网格项使用 height: 100% 或 align-items: stretch 以确保高度按预期继承。
2. fr 单位：分配自由空间的关键
2.1 fr 的语义与计算规则
在 CSS Grid 中，fr 是“分数单位”，不是固定像素，而是对剩余可用空间的份额表示。它的核心含义是：先处理非 fr 的轨道（如固定像素、高度自适应等），再把剩余的空间按照 fr 的比重进行分配。通过 fr 的配置，可以实现等分、成倍分配以及自适应高度的网格。
当网格容器的高度已知时，fr 单位会把纵向的剩余高度按 fr 比例拆分给各行轨道；若某些轨道受 minmax、min-content 等限制，fr 的分配会相应调整，从而达到对高度的动态控制。
/* 示例：纵向使用 fr 实现不等分的网格行 */
.grid {height: 600px;display: grid;grid-template-rows: 1fr 2fr 1fr; /* 三行按 1:2:1 的比例分配高度 */
}
实战要点：在需要自适应高度的场景，优先考虑设置明确的容器高度，再用 fr 进行分配；避免在容器高度为 auto 时使用大量 fr，以免导致不可预测的高度结果。
2.2 fr 的应用场景与垂直方向的限制
fr 在水平和垂直方向上的行为是一致的，但垂直方向的可预测性更强，因为很多布局需要与容器高度绑定。若网格容器高度不可知，fr 将失去稳定基线，导致轨道高度随内容变化波动。这时应使用 min-height/minmax 组合，确保轨道在不同内容量下仍然保持合理高度。
一个常见的技巧是将某些轨道设为固定高度，而让其他轨道使用 fr 分配，这样即能保证关键区域的稳定高度，又能通过 fr 实现剩余空间的自适应。
/* 固定高度 + fr 自适应的横向与纵向混合示例 */
.grid {height: 700px;display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: 100px 1fr 2fr; /* 第一行固定高度，后续行按 fr 分配 */
}
要点提炼：fr 适用于剩余空间的分配，确保容器高度可知是核心前提；在需要可预测性时，混用固定值与 fr 可获得更好的可控性。
3. 实战指南：基于 fr 的网格布局与高度继承
3.1 基本布局示例：固定高度容器与 fr 的纵向分配
在实际页面中，许多卡片式布局希望每一行的高度随浏览器高度自适应，同时保持一定的可读性。通过下述做法，可以实现一个稳定且自适应的网格：
第一个要点是为网格容器设定一个明确的高度，然后通过 fr 继续分配轨道高度；其次让子项高度跟随轨道，即可实现高度继承的直观效果。
/* 完整实例：3 列等分，纵向分配给 3 行 */
.grid {height: 80vh;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 1fr 2fr 1fr;gap: 12px;align-items: stretch;
}
.grid .card {padding: 16px;background: #fff;border: 1px solid #ddd;
}
下列 HTML 结构对应上面的样式：
<div class="grid"><section class="card">内容1</section><section class="card">内容2</section><section class="card">内容3</section>
</div>再给子项内部内容设定高度策略，如需让内部区域也自适应高度，可以使用 height: 100% 或设置一个内部网格来承载更多内容。
3.2 嵌套网格与高度继承的细化实现
当网格项中再嵌套一层网格时，内部网格的高度通常要继承其父项的高度，这时需要在内部网格容器上显式设置 height: 100% 或使用 min-height 以确保内层轨道同样可以按 fr 分配空间。
下面的例子展示了一个外层网格的高度继承如何影响内层网格的自适应：
<div class="outer-grid"><div class="outer-card"><div class="inner-grid"><div>A</div><div>B</div></div></div><div class="outer-card">内容2</div>
</div>/* 外层网格设定高度，内层网格继承高度后再分配 */
.outer-grid {height: 60vh;display: grid;grid-template-columns: 1fr 1fr;
}
.outer-card {background: #f7f7f7;padding: 12px;
}
.inner-grid {height: 100%; /* 继承外层卡片的高度 */display: grid;grid-template-columns: 1fr 1fr;
}
实战要点：嵌套网格时，确保父项具有明确高度，通过 height: 100% 将高度传递给子网格，以实现内外网格的一致高度分配。
3.3 调试与性能考量：如何诊断高度与 fr 的冲突
在调试阶段，优先检查容器高度是否明确，以及是否存在过多的嵌套导致高度计算开销增大。对于复杂布局，可以借助浏览器开发者工具查看网格轨道的实际高度，理解 fr 的分配是否符合预期。
另外，要关注可能的滚动行为和溢出问题：如果某个网格项内容超出轨道高度，默认情况下将会出现滚动或溢出，取决于 overflow 设置以及 align-items 的配置。
/* 溢出控制示例 */
.grid {height: 60vh;display: grid;grid-template-columns: 1fr 1fr;grid-auto-rows: minmax(100px, 1fr); /* 行高度受内容限制，但尽量保持最小高度 */overflow: hidden;
}
.grid .card {overflow: auto; /* 单独项可滚动，避免破坏整体布局 */
}
关键词回顾：CSS Grid、高度继承、fr 单位、网格布局、轨道高度、对齐策略、嵌套网格、最小高度、可访问性。
