¿CSS Grid tiene una función flex-grow?
¿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.