CSS: Memaparkan 4 item dalam 2 lajur menggunakan Lajur: 3

Question

Saya ingin mencipta reka letak batu 3 lajur untuk memaparkan item dengan lebar yang sama tetapi ketinggian yang berbeza, tetapi apabila saya mencuba kod di bawah, saya melihat bahawa lajur ketiga kosong, yang kelihatan agak pelik. Bolehkah saya membetulkannya entah bagaimana?

Saya cuba kod ini, saya ingin mempunyai dua item di lajur pertama dan satu item di lajur kedua dan ketiga. Sila ambil perhatian bahawa 4 item dengan ketinggian yang sama hanyalah kes tertentu, akhirnya saya tidak tahu berapa banyak item yang akan ada dan ketinggian setiap item.

.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

Untuk kes ini anda boleh gabungkan display: flex 与 flex-wrap: wrap 和 justify-content: space- Between dengan bekas

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