在下面的代码中，无论网格中的内容是什么，每个网格项都将保持其宽度和高度。如果内容多于给定的空间，则会在其中滚动。我所做的不同之处在于，在.grid上设置了columns和rows的固定数量。然后，我在每个.grid-view div上添加了overflow:auto（CSS代码中有注解，我在那里添加了东西）。

body {
  background-color: #15243a;
  color: white;
  font-family: "Whyte";
  letter-spacing: 0.1em;
  font-size: 14px;
  margin: 0;
}

.grid {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: grid;
  /* lines I added */
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(11, calc(100vh / 8));
}

.grid-view div {
  border: 1px solid white;
  /* line I added */
  overflow: auto;
}

.top-nav {
  grid-column: 1/12;
}

.top-left-1 {
  grid-column: 1/4;
  grid-row: 2/5;
}

.top-mid-left-1 {
  grid-column: 1;
  grid-row: 5;
}

.top-mid-left-2 {
  grid-column: 2;
  grid-row: 5;
}

.top-mid-left-3 {
  grid-column: 3;
  grid-row: 5;
}

.mid-left-span {
  grid-column: 1/4;
  grid-row: 6;
}

.bot-left-1 {
  grid-column: 1;
  grid-row: 7;
}

.bot-left-2 {
  grid-column: 2;
  grid-row: 7;
}

.bot-left-3 {
  grid-column: 3;
  grid-row: 7;
}

.mid-vertical-col {
  grid-column: 4/6;
  grid-row: 2/8;
}

.top-ill-con {
  grid-column: 6/8;
  grid-row: 2/4;
}

.mid-top-sq-1 {
  grid-column: 6;
  grid-row: 4;
}

.mid-top-sq-2 {
  grid-column: 6;
  grid-row: 5;
}

.mid-top-sq-3 {
  grid-column: 6;
  grid-row: 6;
}

.mid-top-sq-4 {
  grid-column: 6;
  grid-row: 7;
}

.top-right-box {
  grid-column: 10 / 12;
  grid-row: 2/6;
}

.mid-mid {
  grid-column: 7/9;
  grid-row: 4/6;
}

.bottom-span {
  grid-column: 8/10;
  grid-row: 7;
}

.bot-nav {
  grid-column: 1/12;
}

<div class="grid grid-view">
  <div class="top-nav"></div>
  <div class="top-left-1"></div>
  <div class="top-mid-left-1"></div>
  <div class="top-mid-left-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="top-mid-left-3"></div>
  <div class="mid-left-span"></div>
  <div class="bot-left-1"></div>
  <div class="bot-left-2"></div>
  <div class="bot-left-3"></div>
  <div class="mid-vertical-col"></div>
  <div class="top-ill-con"></div>
  <div class="mid-top-sq-1"></div>
  <div class="mid-top-sq-2"></div>
  <div class="mid-top-sq-3"></div>
  <div class="mid-top-sq-4"></div>
  <div class="mid-mid"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="top-right-box"></div>
  <div></div>
  <div></div>
  <div class="bottom-span"></div>
  <div class="bot-nav"></div>
</div>