Why is my css grid not enclosing its child elements?

Question

I am trying to create two 4 by 6 grids nested inside of a 1 by 2 grid. The outermost grid is not containing the children grids. So they are semi collapsing in over each other.

This should be fairly easy.

I've gone through this site:

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

I've gone through youtube tutorials.

I've also tried these tools:

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

I've tried setting columns and rows with fr, %, and px.

I've tried using line numbers, and area. etc.

#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

There is no height defined on your grid containers. This creates two problems:

1. On the primary container, without a defined height, the height is determined by its content. Therefore, there is no extra space available and 1fr doesn't do anything. So you may as well switch to auto in your grid-template-rows: repeat(2, 1fr) rule.

2. On the nested containers, without a defined height, 20% on the rows will render unreliably / quirky across browsers because the browser doesn't know: 20% of what? Therefore, either define a height on the container (knowing that 6 * 20% will overflow) or switch to auto in your grid-template-rows: repeat(6, 20%) rule.

These posts may also help you understand the forces at work here:

• 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