¿Hay un análogo aflex-grow Para elcuadrícula propiedad ?

Me gustaría que mis áreas de cuadrícula acomoden el contenido que reciben, pero que algunas áreas tengan más lugar que otras comoflex-grow paraflex.

Prácticamente, en el siguiente ejemplo me gustaría

elturquoise ser invisible porque acomoda su contenido.losfooter ser invisible también porque no tiene contenido.La sección central toma el resto de la página comoflex-grow.

Más prácticamente, me gustaría este código:

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

Para actuar como este código:

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

Sin eldiv.panel y sin agregar ninguna etiqueta adicional.

La razón por la que me gustaría hacer esto es legítima, ese extradiv El elemento me está molestando.