BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS Gridレイアウトで行の高さを指定するには？

2022-03-08 11:35:59

質問

CSSグリッドレイアウトで いくつかの (中3)行が最大サイズに引き伸ばされます。おそらく、次のようなプロパティを探しているのでしょう。 flex-grow: 1 はFlexboxで行うのですが、解決策が見つからないようです。

注：これは エレクトロン アプリのみなので、ブラウザの互換性はあまり気にする必要はありません。

私は以下の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>

すると、以下のようなグリッドが作成されます。


どのボックスにもコンテンツがない場合、グリッドは次のように表示されるようにしたい。

解決方法は？

そのうちの1つは 関連記事 が（単純な）答えを教えてくれました。

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

.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);
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します