CSS Grid issue, grid layout shrinks

I ran into a weird problem when I was experimenting with layouts, however when I wanted to change a particular row to occupy two rows, the whole layout gets shrunk down.

CodePen Demo

SCSS:

.parent {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: black;
.div1 {
    grid-area: 1 / 2 / 7 / 3;
  }
  .div2 {
    grid-area: 1 / 3 / 7 / 4;
  }
  .div3 {
    grid-area: 1 / 4 / 7 / 5;
  }
  .div4 {
    grid-area: 1 / 5 / 7 / 6;
  }

  .div5 {
    grid-area: 1 / 6 / 7 / 7;
  }
  .div6 {
    grid-area: 1 / 7 / 7 / 8;
  }
  .div7 {
    grid-area: 1 / 8 / 7 / 9;
  }
  .div8 {
    grid-area: 1 / 9 / 7 / 10;
  }

  .div9 {
    grid-area: 7 / 2 / 7 / 10;
  }
  .div10 {
    grid-area: 9 / 2 / 11 / 10;
  }
  .div11 {
    grid-area: 11 / 2 / 13 / 10;
  }
  .div14 {
    grid-area: 13 / 2 / 15 / 10;
  }

  .div12 {
    grid-area: 1 / 1 / 15 / 2;
  }
  .div13 {
    grid-area: 1 / 10 / 15 / 11;
  }
}

div {
  background-color: aquamarine;
}

The culprit in this case is the div called Row 9.

Currently it's grid area is 7/2/7/10

It gets shrunk down, almost like it's resetting when I change it to 7/2/9/10

Is there something I'm missing here or was there a setting I may have missed?

Thanks in advance!