我想做出一個網格填滿剩餘的viewport
主要是用多個grid item的高度填滿剩餘vh，寬度根據高度調整成正方形

例如nav佔據了3rem, 剩餘的vh給grid填滿
假設我設定20x30的grid <= 這邊我希望是透過user控制的
縱向剩餘的vh平均分給grid item
每個grid item的高度就是剩餘vh/30
我設定了aspect-ratio: 1給grid item使其維持正方形
畫面就會是

-----------viewport top---------
nav
-----------分隔線---------
正方形20
...
總共30排
...
正方形20
-----------viewport bottom-------

示意圖大概長這樣
目前相關的css如下

body {
  line-height: 1.5;
  font-size: 62.5%;
  min-height: 100vh;
}

.grid {
  display: grid;
  /* gap: var(--gap, 1rem); */
  grid-template-columns: var(--col, 1fr, auto);
  grid-template-rows: var(--row, 1fr, auto);
  gap: 0;
}

.container {
  flex: 1;
  margin-inline: auto;
  padding: 1rem;
  background-color: #eee;
  width: 100%;
}

.board {
  margin-inline: auto;
  min-height: 100%;
}

.cell {
  transition-duration: 1s;
  border: 1px solid black;
  aspect-ratio: 1;
}

HTML就是body 包著nav和grid的container

<div class="flex center container">
      <div class="board grid bg-white"></div>
</div>

grid item就loop出來

this.board.innerHTML = "";
    for (const i in this.grid) {
      for (const j in this.grid[i]) {
        const el = document.createElement("div");
        el.setAttribute("data-id", `${i},${j}`);
        el.classList.add("cell");
        this.board.appendChild(el);}}

我試了一整天都試不出來，
container width給100%會因為aspect-ratio讓grid item的width超大, overflow
不設定寬度空的div撐不開父元素，寬度只剩border的寬度

請問大家這個問題要怎麼解決呢?
第一次發問如果看不懂我在說甚麼麻煩告訴我，我再補充