Is there an analog to flex-grow
for the grid property ?
I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow
for flex
.
Practically, in the example below I'd like
- the
turquoise
to be invisible because it accomodates its content. - The
footer
to be invisible as well because it has no content. - The middle section take the remaining of the page like
flex-grow
.
More practically, I'd like 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>
See Question&Answers more detail:os