CSS: Rendern von 4 Elementen in 2 Spalten mit Columns: 3

Question

Ich möchte ein Mauerwerkslayout mit drei Spalten erstellen, um Elemente mit derselben Breite, aber unterschiedlichen Höhen darzustellen. Wenn ich jedoch den folgenden Code ausprobiere, sehe ich, dass die dritte Spalte leer ist, was etwas seltsam aussieht. Kann ich das irgendwie beheben?

Ich habe diesen Code ausprobiert. Ich möchte zwei Elemente in der ersten Spalte und ein Element in der zweiten und dritten Spalte haben. Bitte beachten Sie, dass es sich bei 4 Artikeln gleicher Höhe nur um einen Einzelfall handelt. Letztendlich weiß ich nicht, wie viele Artikel es sein werden und wie hoch jeder Artikel ist.

.container {
  column-count: 3;
  background-color: #f7f7f7;
  width: 588px
}

.item {
  width: 180px;
  height: 180px;
  break-inside: avoid;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}

<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
</div>

Answer 1

对于这种情况，您可以将 display: flex 与 flex-wrap: wrap 和 justify-content: space- Between 结合使用容器

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f7f7f7;
  width: 588px
}

.item {
  width: 180px;
  height: 180px;
  break-inside: avoid;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}

<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
</div>