为什么我的CSS网格不包含其子元素？

Question

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

这应该很容易。

我已经浏览过该站点：

• https://css-tricks.com/snippets/css/complete-guide-grid/

我已经看过youtube教程。

我也尝试了以下工具：

• https://grid.layoutit.com/
• https://cssgrid-generator.netlify.com/

我尝试用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>

Answer 1

在网格容器上没有定义高度。这就产生了两个问题：

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

2. 在没有定义高度的嵌套容器上，由于浏览器不知道： 20％的内容？要么在容器上定义一个高度（知道6 * 20％会溢出），要么在auto规则中切换到grid-template-rows: repeat(6, 20%)。

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

• Working with the CSS height property and percentage values
• Why heights need to be defined, but not widths
• The difference between percentage and fr units in CSS Grid Layout

---

#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 demo