设置row-gap为百分比后CSS Grid容器高度小于网格内容如何解决

你遇到的布局异常核心是Grid布局下垂直方向百分比row-gap的计算逻辑问题：

• 根据CSS规范，Grid布局中row-gap如果使用百分比取值，参考基准是Grid容器的水平宽度，而非容器的垂直高度。
• 你没有给.grid-container设置显式的固定高度，这种场景下浏览器计算容器自适应高度时会出现逻辑冲突：容器的自适应高度需要先统计所有网格行高度+行间距的总和才能确定，但百分比row-gap的具体数值需要先拿到容器宽度才能计算，浏览器默认会在计算容器高度时忽略百分比取值的row-gap，但实际渲染网格项的时候row-gap又会正常生效，最终就出现了容器高度小于内部网格内容总高度的情况，溢出的内容被后续的.grid-neighbour元素遮挡。

你可以任选以下一种方案修复：

• 将row-gap的百分比替换为固定像素值，例如row-gap: 30px（可根据你需要的间距调整数值），固定值的行间距不会出现计算依赖问题，浏览器会自动将行间距的高度计入容器总高度。
• 如果需要使用相对单位，可替换为vh、em等不依赖容器尺寸的相对单位，例如row-gap: 2vh。
• 如果必须使用百分比row-gap，给.grid-container显式设置固定高度，高度值需要覆盖所有网格行高度和行间距的总和，保证浏览器可以正常计算行间距数值和容器高度。

内容的提问来源于stack exchange，提问作者Mohsin Sethi