JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#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;
}