I am trying to make a fixed grid, that doesn’t resize no matter what content is added in each individual div. I have tried to use overflow:hidden and the minmax(). The idea is that each individual box / section will hold text / images centerd in each box.

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

.grid-view div {
  border: 1px solid white;
  z-index: 99;
}

.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"></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>

Here is a Codepen as well: https://codepen.io/NiallColman49/pen/xxWwdZx.

NiallColman49 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

With the code below, every grid item will keep its width and height no matter what content in it. If there is more content than the given space, there would be a scroll in it. What I did different from what you have is to set on .grid fixed number of columns and rows. Then I added overflow:auto on each .grid-view div (there are comments in the CSS code, where I added things).

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">dfsqfdfsff kdmsf qsfsd fjsmdlfdsfj sdmflsdfds jfklsdjfksdlmfj dslkfjsdkfj sdfdsfsdkfksdfjmk</div>
  <div class="top-mid-left-2">
    dfsqfdfsff kdmsf qsfsd fjsmdlfdsfj sdmflsdfds jfklsdjfksdlmfj dslkfjsdkfj sdfdsfsdkfksdfjmk
  </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>