Responsive grid that responsively resizes to fit parent div, preserving parent div's own responsive height

Question

I need a grid of squares that responsively (page resize) fills, but does not expand, its parent div.

The basic structure I have is below, with the parent div at 50% height of page. I want the grid to "resize" itself automatically to fit into this 50%. At the moment, the grid overflows. JSFiddle follows.

    .view {
        display: grid;
        grid-template-rows: 10% 50% 40%
    }

    .gridContainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .gridCell {
        aspect-ratio: 1 / 1;
        border: 1px solid #000
    }



    <div class="view">
        <div>TOP 10%</div>
        <div class="gridContainer"> <!-- 50% height -->
            <!-- 1st row --->
            <div class="gridCell">col1 row1</div>
            <div class="gridCell">col2 row1</div>
            <div class="gridCell">col3 row1</div>
            <div class="gridCell">col4 row1</div>
            <div class="gridCell">col5 row1</div>
            <!-- 2nd row --->
            <div class="gridCell">col1 row2</div>
            <div class="gridCell">col2 row2</div>
            <div class="gridCell">col3 row2</div>
            <div class="gridCell">col4 row2</div>
            <div class="gridCell">col5 row2</div>
            <!-- etc. to 5th row -->
        </div>
        <div>BOTTOM 40%</div>
    </div>

The problem is that the gridCells overflow at the bottom and get cropped/go out of bounds. Here's the JSFiddle demonstrating the problem...

https://jsfiddle.net/r5ezfaxu/4/

What I'm hoping to have happen is for the entire 5x5 grid to appear centered in the green area, at it maximum fitting size. I recognize that this will cause pillar boxing (which is vertical gaps, vs letter boxing which is horizontal gaps).

I've tried the code above with a variety of flex box and grid tweaks, but I'm at a loss. Please advise!

Answer 1

Try this. It uses containment units to get the cells the right size:

.view {
  display: grid;
  grid-template-rows: 10% 50% 40%;
  height: calc(100vh - 16px);  /* viewport height - body margins */
}

.gridContainer {
  container-type: size;
  display:flex;
}

.grid {
  display: grid;
  height: 100cqmin;  /* min of the height and width of the grid container */
  container-type: size;
  aspect-ratio: 1 / 1;  /* width matches height */
  margin: auto;  /* centres the grid in the grid container */
  grid-template-columns: repeat(5, auto);
}

.gridCell {
  height: 20cqb;  /* One fifth of the grid size */
  aspect-ratio: 1 / 1;  /* cells are square */
  box-sizing: border-box;
  border: 1px solid #000
}

    <div class="view">
      <div style="background-color: #f00">TOP 10%</div>
      <div class="gridContainer"  style="background-color: #0f0">
        <div class="grid">
          <!-- 1st row --->
          <div class="gridCell">1</div>
          <div class="gridCell">2</div>
          <div class="gridCell">3</div>
          <div class="gridCell">4</div>
          <div class="gridCell">5</div>
          <!-- 2nd row --->
          <div class="gridCell">1</div>
          <div class="gridCell">2</div>
          <div class="gridCell">3</div>
          <div class="gridCell">4</div>
          <div class="gridCell">5</div>
          <!-- etc. to 5th row -->
          <div class="gridCell">1</div>
          <div class="gridCell">2</div>
          <div class="gridCell">3</div>
          <div class="gridCell">4</div>
          <div class="gridCell">5</div>

          <div class="gridCell">1</div>
          <div class="gridCell">2</div>
          <div class="gridCell">3</div>
          <div class="gridCell">4</div>
          <div class="gridCell">5</div>

          <div class="gridCell">1</div>
          <div class="gridCell">2</div>
          <div class="gridCell">3</div>
          <div class="gridCell">4</div>
          <div class="gridCell">5</div>
        </div>
      </div>
      <div style="background-color: #00f">BOTTOM 40%</div>
    </div>