CSS网格嵌套导致子网格脱离父网格单元

Question

我正在开发我的个人网站，我正在使用CSS网格来处理所有与布局相关的内容。我正在努力使我的网格系统尽可能灵活，以允许嵌套(以防我真的需要(。

我的问题如下：我有一个有2行的网格，每行有2列，分别有3列。我试图基本上嵌套相同的网格，在第一个网格的3列中。我认为，因为差距太大，他们会被父母吹走。

预览我的嵌套网格溢出父网格单元格

以下代码：

.grid {
display: grid;
width: 100%;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 50px;
}
.grid__col-12 { grid-column-end: span 12; }
.grid__col-4 { grid-column-end: span 4; }
.grid__col-3 { grid-column-end: span 3; }
.grid__col-6 { grid-column-end: span 6; }

<div class="grid">
<div class="grid__col-6">hey</div>
<div class="grid__col-6">hey</div>
<div class="grid__col-4">hey</div>
<div class="grid__col-4">hey</div>
<div class="grid grid__col-4">
<div class="grid__col-6">hey</div>
<div class="grid__col-6">hey</div>
<div class="grid__col-4">hey</div>
<div class="grid__col-4">hey</div>
<div class="grid__col-4">hey</div>
</div>
</div>

我真的不明白为什么会发生这种事，所以希望能澄清一下。

非常感谢！

Answer 1

第二个网格溢出div元素的原因是因为您的grid-gap。浏览器会将grid-gap值优先于现有的fr单位。因此，无论父元素(或屏幕(宽度为，浏览器都会尝试确保您具有grid-gap: 50px，。

因此，如果你的屏幕宽度是(例如(375px(iPhone 11 Pro大小(，浏览器会尽其所能获得50px的grid-gap，但你会遇到div大小的问题，因为浏览器试图找到留给div元素的任何空间。在这种情况下，您剩下的空间量将非常小，因此您必须使用@media查询来更改网格在不同屏幕宽度下的工作方式。。。也就是说，如果你坚持保留50px的grid-gap。

另一个解决方案是将grid-gap设为百分比这样，无论您拥有什么父元素(或屏幕(宽度，它都是动态的。

总之，嵌套网格没有足够的空间容纳div元素，因为嵌套网格已经很小了。浏览器会对grid-gap: 50px进行优先级排序，这样在嵌套网格中就没有其他列的空间了。