Nested grids result in rows automatically filling the largest size - css

Question

I have a grid that works great:
.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>
In this example, I have the page divided into 4, with all divs the same size. As the text gets longer in the first card, it expands, pushing the other cards down (making them smaller) before ultimately pushing them off the page, increasing the height of the div.
https://codepen.io/EightArmsHQ/pen/641b47d9bbc7a13880a53b0da04bd3bb
If I wrap this another 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>
Then the .grid rows all match each others height. Which is cool, but not what I want in this scenario. How can I make them behave similarly to the previous example?
Incorrect behaviour:
https://codepen.io/EightArmsHQ/pen/5637d435b48628aa5f31d5b996bbc6bf

Answer 1

The 1fr in grid-template-rows: 20vh 1fr; makes the second grid take up the rest of the available space after your controls div. That space then gets equally divided in four quarters by the CSS settings of your second grid:
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
Simply remove the grid-template-rows style from your second grid so the grid row height is set to auto.
.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;
}