web-dev-qa-db-ja.com

CSS Gridにはflex-grow機能がありますか？

flex-growは grid プロパティ？

グリッドエリアには、受信したコンテンツを収容するが、一部のエリアにはflex-grow for flex。

実際には、以下の例で私はしたい

  • turquoiseは、コンテンツを収容するため不可視です。
  • footerもコンテンツがないため非表示になります。
  • 中央のセクションでは、flex-grow。

より実用的には、このコードが欲しいです：

.ctnr {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.test {
  background: black;
  height: 1rem;
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
  background: yellow
}
<div class="ctnr">
  <header>
    <div class="test"></div>
  </header>
  <nav></nav>
  <main></main>
  <footer></footer>
</div>

このコードのように動作するには：

.ctnr {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.panel {
  flex-grow: 1;
  display: flex;
}

header {
  flex-grow: 0;
  background: turquoise;
}

nav {
  min-width: 10rem;
  background: grey
}

footer {
  background: yellow
}
<div class="ctnr">
  <header>hey</header>
  <div class="panel">
    <nav></nav>
    <main></main>
  </div>
  <footer></footer>
</div>

Withoutdiv.panelおよび追加のタグなし。

私がこれをしたい理由は正当なものであり、余分なdiv要素は私を悩ます。

htmlcsscss3css-grid
14
Ced

CSSグリッドはfrユニットを提供し、flex-growと同様に機能します。

flex-grow はコンテナ内の空き領域をflexアイテムに分配しますが、frユニットは分配します行/列間のコンテナ内の空き領域。

仕様から：

7.2.3。柔軟な長さ：fr unit

柔軟な長さまたは<flex>は、fr単位を持つディメンションであり、グリッドコンテナの空き領域の一部を表します。

（flex-growはflexアイテムに適用されます、frの長さはgridコンテナに適用されます。）

したがって、グリッドには3つの行があります。

  1. 最初の行はヘッダーです。コンテンツの高さを設定する必要があります。そのため、高さはautoに設定されます。

  2. 最後の行はフッターです。コンテンツの高さを設定する必要があります。そのため、高さはautoに設定されます。

  3. 中央の行には、navおよびmain要素が含まれています。この行が残りのすべての垂直スペースを占めるようにします。したがって、その高さは1frに設定されます。

.ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* key rule */
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
}

main {
  grid-area: main;
  background: orange;
}

footer {
  grid-area: footer;
  background: yellow;
}

body {
  margin: 0;
}
<div class="ctnr">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

jsFiddleデモ

18
Michael_B