是否有一个模拟flex-grow了电网的财产？
我希望我的网格区域能够容纳他们收到的内容,但是有些区域比其他区域更flex-grow适合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>像这样的代码: