如果我为 grid-gap 设置一个变量值喜欢10% padding-bottom父项 (<div id="grid">) 开始在子项 (<div class="grid-item">) 内部流动。为什么会这样？我该如何防止这种行为？
这是一个最小的例子:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#grid {
padding-bottom: 100px;
display: grid;
grid-gap: 10%;
grid-template-columns: 100px;
}
.grid-item img {
width: 100%;
}
<div id="grid">
<div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
<h3>Stack Overflow</h3>
</div>
<div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
<h3>Stack Overflow</h3>
</div>
</div>
您可以使用开发工具检查网格父级 ( <div id="grid"> ) 并查看填充或查看此屏幕截图以查看问题(填充(绿色)侵犯网格元素的空间(虚线)框)):
这是我的猜测，基于我对级联、百分比长度和 grid sizing algorithm 的了解.我还没有找到任何专门解决此问题的官方信息，因此，这再次是一种推断。
要使百分比高度起作用，当父容器上没有明确定义高度时，浏览器首先需要呈现所有其他长度。通过这种方式，它可以得出容器的实际大小并可以回答以下问题:“10% 的是什么？”。
因此，浏览器首先呈现元素和 padding-bottom: 100px。
现在它可以计算 grid-gap: 10% 或者，更具体地说，row-gap: 10% 组件(百分比高度)。
因为所有其他尺寸都已经到位，所以这额外的 10% 高度迫使较低的元素侵入固定的填充空间。
为了支持这个理论，如果我们在容器上设置一个高度，它现在为百分比行高提供了一个明确的引用点，则规则可以与其他规则按顺序呈现(即，不需要百分比最后渲染的高度)，并且在大多数情况下重叠被消除。 (在较短的屏幕中仍然会出现重叠，因为内边距的高度固定为 100px。)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#grid {
padding-bottom: 100px;
display: grid;
grid-gap: 10%;
grid-template-columns: 100px;
height: 100vh; /* new */
}
.grid-item img {
width: 100%;
}
<div id="grid">
<div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
<h3>Stack Overflow</h3>
</div>
<div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
<h3>Stack Overflow</h3>
</div>
</div>