时间戳

首页 > 解决方案 > CSS Grid Nesting 导致子网格从父网格单元格中溢出

css - CSS Grid Nesting 导致子网格从父网格单元格中溢出

问题描述

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

我的问题如下：我有一个有 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>

我真的不明白为什么会这样，所以希望得到一些澄清。

十分感谢！

标签： cssnestedoverflowcss-grid

解决方案

第二个网格有溢出div元素的原因是因为你的grid-gap. grid-gap浏览器将值优先于fr您现有的单位。因此，您的浏览器总是试图确保您拥有grid-gap: 50px，而不管父元素（或屏幕）的宽度如何。

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

另一个解决方案是让你grid-gap的百分比。这样，无论您拥有的父元素（或屏幕）宽度如何，它都会是动态的。

总而言之，您的嵌套网格没有足够的空间容纳其div元素，因为嵌套网格已经很小了。浏览器优先考虑grid-gap: 50px，因此嵌套网格中没有空间留给其他列。

推荐阅读