CSS网格:使未知行数的最后一行占剩余高度

时间:2020-05-13 09:37:03

标签: css css-grid

我知道如何使用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有多少行?

0 个答案:

没有答案