大型项目跨越多行时，您可以控制网格的行大小吗？

问题描述

我有一个div设置为display: grid，并且此网格有三列。在第一列中，我有一个跨两行的大项目。现在，由于该项目比其他所有项目都大，因此将其跨越的两行设置为相等的高度。我希望第一行适合内容，第二行填充其余空间（类似于flex-grow: 1，但适用于网格）。我将如何去做？

<style>
  .container {
    display: grid;
  }
  .large__item {
    grid-row: 1 / 3;
    height: 100px;
  }
  .item__one {
    grid-column: 2;
    grid-row: 1
  }
  .item__two {
    grid-column: 2;
    grid-row: 2
  }
</style>

<div class="container">
  <!--Height is actually unknown-->
  <div class="large__item"></div>
  <!--Should fit to content-->
  <div class="item__one">Content</div>
  <!--Should fill rest of space-->
  <div class="item__two">Fill</div>
</div>

解决方法

您应在grid-template-rows规则中像这样grid-template-rows: max-content auto定义行的大小，这将创建两行，第一行将是内容的高度，第二行将是{{ 1}}到跨两行的较大元素的高度。

auto

.container {
  display: grid;
  grid-template-rows: max-content auto;
  background-color: red;
}

.large-item {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-color: gray;
}

.item-one {
  grid-column: 2;
  grid-row: 1;
  background-color: blue;
}

.item-two {
  grid-column: 2;
  grid-row: 2;
  background-color: yellow;
}