时间戳

首页 > 解决方案 > 为什么我的 CSS 网格没有包含它的子元素？

css - 为什么我的 CSS 网格没有包含它的子元素？

问题描述

我正在尝试创建两个嵌套在 1 x 2 网格内的 4 x 6 网格。最外面的网格不包含子网格。因此，它们彼此半塌陷。

这应该相当容易。

我浏览了这个网站：

我已经浏览了 youtube 教程。

我也试过这些工具：

我尝试使用 fr、% 和 px 设置列和行。

我试过使用行号和区域。等等

#outside {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 10%;
  //grid-row-gap: 300px;
  justify-content: center;
  align-content: center;
  background-color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 20%);
  grid-auto-rows: 300px;
  grid-gap: 8px;
  justify-content: center;
  align-items: center;
  background-color: green;
}

.item {
  padding: 20px;
  background-color: blue;
}
<div id="outside">

    <div class="grid">
        <div class="item i1a">1</div>
        <div class="item i2a">2</div>
        <div class="item i3a">3</div>
        <div class="item i4a">4</div>
        <div class="item i5a">5</div>
        <div class="item i6a">6</div>
        <div class="item i7a">7</div>
        <div class="item i8a">8</div>
        <div class="item i9a">9</div>
        <div class="item i10a">10</div>
        <div class="item i11a">11</div>
        <div class="item i12a">12</div>
        <div class="item i13a">13</div>
        <div class="item i14a">14</div>
        <div class="item i15a">15</div>
        <div class="item i16a">16</div>
        <div class="item i17a">17</div>
        <div class="item i18a">18</div>
        <div class="item i19a">19</div>
        <div class="item i20a">20</div>
        <div class="item i21a">21</div>
        <div class="item i22a">22</div>
        <div class="item i23a">23</div>
        <div class="item i24a">24</div>
    </div>
    <div class="grid">
        <div class="item i1b">1</div>
        <div class="item i2b">2</div>
        <div class="item i3b">3</div>
        <div class="item i4b">4</div>
        <div class="item i5b">5</div>
        <div class="item i6b">6</div>
        <div class="item i7b">7</div>
        <div class="item i8b">8</div>
        <div class="item i9b">9</div>
        <div class="item i10b">10</div>
        <div class="item i11b">11</div>
        <div class="item i12b">12</div>
        <div class="item i13b">13</div>
        <div class="item i14b">14</div>
        <div class="item i15b">15</div>
        <div class="item i16b">16</div>
        <div class="item i17b">17</div>
        <div class="item i18b">18</div>
        <div class="item i19b">19</div>
        <div class="item i20b">20</div>
        <div class="item i21b">21</div>
        <div class="item i22b">22</div>
        <div class="item i23b">23</div>
        <div class="item i24b">24</div>
    </div>

</div>

标签： csscss-grid

解决方案

您的网格容器上没有定义高度。这会产生两个问题：

  1. 在没有定义高度的主容器上，高度由其内容决定。因此，没有可用的额外空间并且1fr不执行任何操作。所以你不妨切换到auto你的grid-template-rows: repeat(2, 1fr)规则。

  2. 在没有定义高度的嵌套容器上，行上的 20% 将在浏览器中不可靠/古怪地呈现，因为浏览器不知道：20% 是什么？因此，要么在容器上定义一个高度（知道 6 * 20% 会溢出），要么auto在你的grid-template-rows: repeat(6, 20%)规则中切换到。

这些帖子还可以帮助您了解这里起作用的力量：

#outside {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto); /* adjustment */
  /* grid-auto-rows: 10%; */
  justify-content: center;
  align-content: center;
  background-color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, auto); /* adjustment */
  grid-auto-rows: 300px;
  grid-gap: 8px; /* creates space between grid items only; "gutters" */
  padding: 8px;  /* creates space between container and items */
  justify-content: center;
  align-items: center;
  background-color: green;
}

.item {
  padding: 20px;
  background-color: blue;
}

body {
  margin: 0;
}
<div id="outside">
  <div class="grid">
    <div class="item i1a">1</div>
    <div class="item i2a">2</div>
    <div class="item i3a">3</div>
    <div class="item i4a">4</div>
    <div class="item i5a">5</div>
    <div class="item i6a">6</div>
    <div class="item i7a">7</div>
    <div class="item i8a">8</div>
    <div class="item i9a">9</div>
    <div class="item i10a">10</div>
    <div class="item i11a">11</div>
    <div class="item i12a">12</div>
    <div class="item i13a">13</div>
    <div class="item i14a">14</div>
    <div class="item i15a">15</div>
    <div class="item i16a">16</div>
    <div class="item i17a">17</div>
    <div class="item i18a">18</div>
    <div class="item i19a">19</div>
    <div class="item i20a">20</div>
    <div class="item i21a">21</div>
    <div class="item i22a">22</div>
    <div class="item i23a">23</div>
    <div class="item i24a">24</div>
  </div>
  <div class="grid">
    <div class="item i1b">1</div>
    <div class="item i2b">2</div>
    <div class="item i3b">3</div>
    <div class="item i4b">4</div>
    <div class="item i5b">5</div>
    <div class="item i6b">6</div>
    <div class="item i7b">7</div>
    <div class="item i8b">8</div>
    <div class="item i9b">9</div>
    <div class="item i10b">10</div>
    <div class="item i11b">11</div>
    <div class="item i12b">12</div>
    <div class="item i13b">13</div>
    <div class="item i14b">14</div>
    <div class="item i15b">15</div>
    <div class="item i16b">16</div>
    <div class="item i17b">17</div>
    <div class="item i18b">18</div>
    <div class="item i19b">19</div>
    <div class="item i20b">20</div>
    <div class="item i21b">21</div>
    <div class="item i22b">22</div>
    <div class="item i23b">23</div>
    <div class="item i24b">24</div>
  </div>
</div>

jsFiddle 演示

推荐阅读