如何在CSS网格上制作这样的标记？

Question

我遇到了一个问题，我像往常一样在flex上进行布局，并面临着这样一个事实：高度块之间的空虚问题无法解决。

但我不明白如何在网格上再次执行所有这些操作。请帮助我。

事情应该是这样的：

这是我对 flex(((

Answer 1

您正在寻找的称为“便当网格”布局。您可以在这里查看一些示例 但是回到你的问题，使用 CSS Columns 你可以实现布局

检查这个例子：

.child {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  break-inside: avoid;
}

.child-1 {
  height: 6rem;
  background-color: rgb(255 192 203);
}

.child-2 {
  height: 8rem;
  background-color: rgb(255 99 71);
}

.child-3 {
  height: 9rem;
  background-color: rgb(135 206 235);
}

.child-4 {
  background-color: rgb(255 215 0);
}

.child-5 {
  height: 6rem;
  background-color: rgb(238 130 238);
}

.child-6 {
  background-color: rgb(240 128 128);
}

.child-7 {
  background-color: rgb(65 105 225);
}

.child-8 {
  height: 6rem;
  background-color: rgb(144 238 144);
}

.columns-3 {
  columns: 2;
}

.gap-4 {
  gap: 1rem;
}

<div class="parent columns-3 gap-4">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
  <div class="child child-4">4</div>
  <div class="child child-5">5</div>
  <div class="child child-6">5</div>
  <div class="child child-7">6</div>
  <div class="child child-8">7</div>
</div>