Fixed grid where each grid item keeps its dimension no matter what content it holds-CodePudding

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 centred in each box. Here is my code:

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 >
      <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>
      <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>
      <div></div>
      <div></div>
      <div ></div>
      <div></div>
      <div></div>
      <div ></div>
      <div ></div>
    </div>

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

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div >dfsqfdfsff kdmsf qsfsd fjsmdlfdsfj sdmflsdfds jfklsdjfksdlmfj dslkfjsdkfj sdfdsfsdkfksdfjmk</div>
  <div >
    dfsqfdfsff kdmsf qsfsd fjsmdlfdsfj sdmflsdfds jfklsdjfksdlmfj dslkfjsdkfj sdfdsfsdkfksdfjmk
  </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></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></div>
  <div></div>
  <div ></div>
  <div ></div>
</div>