CSS：使用列數：3 時，在 2 列呈現 4 個項目

Question

我想創建一個 3 列的磚石佈局來渲染具有相同寬度但不同高度的項目，但是當我嘗試下面的程式碼時，我看到第三列是空的，這看起來有點奇怪。我能以某種方式修復它嗎？

我嘗試了這段程式碼，我希望第一列中有兩個項目，第二列和第三列中有一個項目。請注意，4 個相同高度的項目只是一個具體情況，最終我不知道會有多少個項目以及每個項目的高度。

.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>