In a group of elements laid out with CSS's 'display: grid', when I assign one element to a parent tag it cancels the grid pattern for the child. Why?

Question

I have this group of search boxes and I need to assign a parent div or span to each group of <input> and <button> elements so I can do a fade in animation on load by sequence. When I do this the grid pattern gets undone for that particular child element group as you can see below the middle one. I tied to fix this in several ways but I cannot find the cause and solution for this issue. What am I doing wrong here?

Snippet and jsfiddle link below:

https://jsfiddle.net/jqzzy/dezq1m3t/34/

.grid-container {
  display: grid;
  width: auto;
  height: auto;
  gap: 12px 6px;
  padding: 0px;
  grid-template-columns: 200px 60px;
  grid-template-rows:
    40px 40px 40px;
}

.grid-item-input {
  background-color: #313131;
  left: 10px;
  font-size: 11pt;
  top: 5px;
  padding: 0px 10px;
  padding-top: 3px;
  border: solid 1px #494949;
  border-radius: 7px;
}

.grid-item-BT {
  position: relative;
  top: 1x;
  background: linear-gradient(0deg, #303030, transparent) #505050;
  color: #acacac;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: 0px solid #666666;
  border-radius: 9px;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}

.item5 {
  grid-column: 1;
  grid-row: 3;
}

.item6 {
  grid-column: 2;
  grid-row: 3;
}

/*///////////// HIGHLIGHT BOX ANIMATION /////////////// */

span input[type="text"] {
  border: 1px solid #5c5c5c;
  font-size: 11pt;
  top: 5px;
  padding: 0px 10px;
  padding-top: 3px;
  -webkit-transition: all .4s;
  -webkit-transform: translate(0px, 0);
  -webkit-transition: 0.25s ease-out;
  animation: 0.25s ease-out 0s 1 scaleBtn;
}

span input[type="text"]:focus {
  background-color: #414141;
  color: #e4e4e4;
  outline: 0;
  font-size: 11pt;
  -webkit-box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
  box-shadow: inset 0 1px 1px #00000013, 0 0 8px rgba(233, 102, 102, 0.6);
}

span input:focus {
  border-color: #e63f3f;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
  box-shadow: inset 0 1px 1px #00000013, 0 0 8px #e9666699;
}

/*///////////// PLACEHOLDER TEXT ANIMATION /////////////// */

.placeholder1,
.placeholder3,
.placeholder5{
  position: relative;
  width: 0px;
  top: 7px;
  left: 7px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 0px 0px;
  color: grey;
  -webkit-transition: 0.25s;
  -webkit-transform: translate(0px, 0);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
}

.item1:focus~.placeholder1,
.item3:focus~.placeholder3,
.item5:focus~.placeholder5{
  top: -10px;
  right: -8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  opacity: 0;
}

.placeholder2,
.placeholder4,
.placeholder6 {
  position: relative;
  width: 0px;
  top: 7px;
  left: 7px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 0px 0px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: 0.25s;
  -webkit-transform: translate(0px, 0);
}

.item1:focus~.placeholder2,
.item3:focus~.placeholder4,
.item5:focus~.placeholder6 {
  background-color: #181212;
  width: fit-content;
  height:  fit-content;
  top: -10px;
  right: -8px;
  font-size: 16px;
  font-weight: normal;
  color: #e4a8a8;
  opacity: 1;
}

.input:not(:focus) {
  color: #9e595900;
}

.input:not(:focus) {
  color: #9e595900;
}

/*/////////////////////////////////////////////////////*/

.i01 {
  animation: fade-in-item 0.4s 0.0s ease-in-out forwards;
}

.i02 {
  animation: fade-in-item 0.4s 0.15s ease-in-out forwards;
}

.i03 {
  animation: fade-in-item 0.4s 0.3s ease-in-out forwards
}

.i04 {
  animation: fade-in-item 0.4s 0.45s ease-in-out forwards;
}

@-webkit-keyframes fade-in-item {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

    <span>

        <div class="grid-container">

          <input class="grid-item-input item1 input" type="text" id="linkKBs" maxlength="" value="" autocomplete="off" autofocus>
          <span class="item1 placeholder1">My Guinea Pigs:</span>
          <span class="item1 placeholder2">Search for Guinea Pig:</span>
          <button class="grid-item-BT item2" tabindex="-1">SEARCH</button>
          
          <div class="i01">
          <input class="grid-item-input item3 input" type="text" id="linkInc" maxlength="" value="" autocomplete="off">
          <span class="item3 placeholder3">My Bananas:</span>
          <span class="item3 placeholder4">Search for Banana:</span>
          <button class="grid-item-BT item4" tabindex="-1">SEARCH</button>
          </div>
          
          <input class="grid-item-input item5 input" type="text" id="linkAAChan" maxlength="" value="" autocomplete="off">
          <span class="item5 placeholder5">My Comic Books:</span>
          <span class="item5 placeholder6">Search Comic Book:</span>
          <button class="grid-item-BT item6" tabindex="-1">SEARCH</button>

        </div>

    </span>