html - CSS グリッド レイアウトで行の高さを指定するにはどうすればよいですか?

Question

いくつかの(中央の 3) 行を最大サイズまで伸ばしたい CSS グリッド レイアウトがあります。おそらく Flexbox と同様のプロパティを探しているのflex-grow: 1ですが、解決策が見つからないようです。

注: これはElectronアプリのみを対象としているため、ブラウザーの互換性は実際には問題になりません。

次の CSS グリッド レイアウトがあります。

.grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-gap: 10px;
  height: calc(100vh - 10px);
}

.grid .box {
  background-color: grey;
}

.grid .box:first-child,
.grid .box:last-child {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
  grid-column-start: 1;
  grid-column-end: -1;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

次のグリッドを作成します。

どのボックスにもコンテンツが含まれていない場合、グリッドは次のようになります。