Html 响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

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