web-dev-qa-db-ja.com

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

CSSグリッドレイアウトを使用して、some（中央3）行を最大サイズに拡大します。 flex-grow: 1がFlexboxで行うことと似たプロパティを探しているかもしれませんが、解決策が見つからないようです。

注：これは 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>

次のグリッドが作成されます。

Current Grid




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

Preferred Grid

htmlcssgrid-layoutcss-grid
24
Chris

関連記事 の1つが（簡単な）答えをくれました。

どうやらgrid-template-rowsプロパティのauto値は、まさに私が探していたものを実行します。

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