如何使网格项只占用行中的剩余空间？

Question

我想让网格项目2，3，4挤压到顶部，它不应该从它的自然网格线开始。我想移除网格项目(2-3)和网格项目3-4之间的水平额外空间。我怎样才能做到这一点？

网格项1可以是任意高度。它是动态的。

​

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.container>div {
  background-color: teal;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: whitesmoke;
}

.item1 {
  grid-row: 1/4;
  height: 500px;
}

.item2,
.item3,
.item4 {
  height: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

​

Answer 1

我喜欢考虑网格是抽象层而不是固定结构。这样，您可以自由地将div放置到网格块中，而不是网格块。

按照这种模式，定义一个8行的网格，并告诉您的div占据"x“行就可以做到这一点。可以随意使用行号和跨度，以更好地满足您的需要。:)

​

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.container>div {
  background-color: teal;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: whitesmoke;
}

.item1 {
  grid-row: 1/8;
  height: 500px;
}

.item2,
.item3,
.item4 {
  grid-row: span 2;
  height: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

​

这是这个想法的草图：

​

Answer 2

最简单的方法是添加另一个可以展开的行。

.item1 {
  grid-row: 1/5;
  height: 500px;
}

grid-row: 1/5意味着网格将有4行。这允许3项流到右侧的顶部，第四行可以根据需要展开。