CSS GRID: container with equal grid, with different numbers of columns and rows?

Question

I'm trying to create container with square, equal grid. If I set for .container the same numbers of columns and rows, grid is equal. But if I create grid like below and insert into it items, grid with those items loose their equal shape. How to prevent that?

.c-containter {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 8px;
  background-color: red;
}

.c-containter::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.e-container {
  position: relative;
  background-color: blue;
}

.e-container__item-1 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 4;
}

.e-container__item-2 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 9;
}

.e-container__item-3 {
  grid-column-start: 8;
  grid-column-end: 17;
  grid-row-start: 1;
  grid-row-end: 9;
}

<div class="c-containter">

  <div class="e-container e-container__item-1"></div>
  <div class="e-container e-container__item-2"></div>
  <div class="e-container e-container__item-3"></div>

</div>