嵌套网格会导致行自动填充最大大小

Question

我有一个运行良好的网格：

.grid {
display: grid;
height: 100vh;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card {
border: 2px solid #000;
}

<div class="grid">
<div class="card">Lots and lots and lots of text...</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

在这个例子中，我将页面分成4个，所有div的大小都相同。当第一张卡片中的文本变长时，它会展开，将其他卡片向下推(使它们更小(，然后最终将它们推下页面，从而增加分区的高度。

https://codepen.io/EightArmsHQ/pen/641b47d9bbc7a13880a53b0da04bd3bb

如果我把这个包装成另一个div

.wrap {
height: 100vh;
display: grid;
grid-template-rows: 20vh 1fr;
}
.grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card {
border: 2px solid #000;
}

<div class="wrap">
<div class="controls">
<h1>Text here.</h1>
</div>
<div class="grid">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>

则.grid行的高度全部匹配。这很酷，但在这种情况下不是我想要的。如何使它们的行为与前面的示例类似？

错误行为：

https://codepen.io/EightArmsHQ/pen/5637d435b48628aa5f31d5b996bbc6bf

Answer 1

grid-template-rows: 20vh 1fr;中的1fr使第二个网格占据控件div之后的剩余可用空间。然后，这个空间被第二个网格的CSS设置平分为四分之一：

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;

只需从第二个网格中删除grid-template-rows样式，即可将网格行高度设置为自动。

.wrap{
height: 100vh;
display: grid;
grid-template-rows: 20vh 1fr;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
padding: 10px;
}
.card{
border: 2px solid #000;
}