Does the CSS Grid have a flexible growth feature?

Question

Is there an analogue flex-growfor the grid property ?

I would like my grid areas to host the content they receive, but some areas take up more space than others, for example flex-growfor flex.

In practice, in the example below, I would like

• turquoise to be invisible because it contains its contents.
• footer will be invisible since it has no content.
• The middle part takes up the rest of the page, for example flex-grow.

Moreover, I would like to get this code:

.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>

Run codeHide result

To act like this code:

.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>

Run codeHide result

Without div.panel and without adding an additional tag.

, , , div .

Answer 1

CSS Grid fr, flex-grow.

flex-grow flex, fr /.

:

7.2.3. : fr

<flex> fr, .

( , flex-grow , fr .)

, :

• - . , . ​​ auto.

• - . , . ​​ auto.

• 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>

Hide result

jsFiddle demo

Answer 2

Bootstrap.

https://v4-alpha.getbootstrap.com/