我知道如何使用minmax(0, 1fr)
使网格的最后一行填充剩余的垂直空间。
我需要知道的是如何解决动态行数的问题?
此示例明确定义了3行:
body {
margin: 0;
}
.grid-container {
display: grid;
height: 100vh;
grid-template-rows: repeat(2, minmax(auto, 30px)) minmax(0, 1fr);
grid-gap: 10px;
}
.grid-container>div {
background-color: #f0f0f0;
border: 2px dashed #999;
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
是否有一种方法来定义grid-template-rows
,例如,我不必知道div.grid-container
有多少行?