如何调整块高，而不考虑网格中另一个块的高度？

Question

我想做一些独立于其他高度的街区，能做到这一点吗？

如何使我的第二个盒子的高度不取决于第一个盒子的高度。因此，框4应按在框2的底部？

​

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 0px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: minmax(10px, auto);
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper>div {
  padding: 1em;
  background-color: #d7cfe79f;
}

.box-1 {
  grid-column: 1/7;
}

.box-2 {
  grid-column: 7/11;
}

.box-3 {
  grid-column: 1/7;
}

.box-4 {
  grid-column: 7/11;
}

<div class="wrapper">
  <div class="box box-1">Box 1<br/><br/><br/></div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

预期结果：

​

Answer 1

您正在寻找一种砌体类型的布局，它可以使用grid-template-rows实现。

grid-template-rows: masonry;

请注意， 这个特性还没有正式登陆任何浏览器。，所以您无法申请生产使用。

如果你想要看到它的行动，使用火狐，打开一个新的标签，并在那里输入about:config。确认安全问题，然后在搜索栏中键入砖石。

这将显示实验特性，并允许您启用它(将其设置为true)。它在下面

layout.css.grid-template-masonry-value.enabled

在此之前，您将需要一些变通方法，比如手动创建列包装器，或者使用类似于masonry.js的方法。

下面是Firefox如何在启用了实验砖石特性的情况下呈现它：

​

​

​

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 0px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper>div {
  padding: 1em;
  background-color: #d7cfe79f;
}

.box-1 {
  grid-column: 1/7;
}

.box-2 {
  grid-column: 7/11;
}

.box-3 {
  grid-column: 1/7;
}

.box-4 {
  grid-column: 7/11;
}

<div class="wrapper">
  <div class="box box-1">Box 1<br/><br/><br/></div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

​