Question

我正在我的个人网站上工作，并且正在使用CSS Grid处理与布局有关的所有内容。我正在尝试使我的网格系统尽可能灵活以允许嵌套（以防我真的需要）。

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

Preview of my nested grid overflowing the parent grid cell

以下代码：

.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，无论父元素（或屏幕）的宽度如何。

因此，如果您的屏幕宽度（例如）为375像素（iPhone 11 Pro尺寸），浏览器将尽一切努力使grid-gap达到50像素，但是{{1 }}大小，因为浏览器试图查找div元素剩余的空间。在这种情况下，您剩下的空间将非常小，因此您必须使用div查询来更改网格在不同屏幕宽度下的工作方式...也就是说，如果您坚持使用保持50px @media。

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

总而言之，您的嵌套网格没有足够的空间容纳其grid-gap元素，因为嵌套网格已经很小。浏览器会优先考虑div的优先级，因此该嵌套网格中没有剩余空间可容纳其他列。

CSS网格嵌套导致Sub-grid脱离父网格单元

1 个答案: