Mengapa celah kolom saya menjadi lebih kecil saat saya menambah lebar wadah saya?

Question

Saya mengalami kesulitan memahami logika di balik celah kolom dalam tata letak multi-kolom. Saya memiliki HTML / CSS berikut di Fiddle ini :

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

.flex-container {
  height: 500px;
  width: 300px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

Anda akan melihat bahwa jika Anda mengubah widthwadah dari 300px menjadi 400px, jarak antara kolom sebenarnya menyusut.

Mengapa melakukan ini? Apakah mungkin untuk meratakan kolom ke kiri sehingga tidak berpindah-pindah? Kesenjangan tetap antara kolom CSS mungkin menunjukkan bahwa itu tidak mungkin.

Answer 1

Tata letak kolom agak rumit. Jika Anda membaca spesifikasi yang terkait dengan column-widthAnda dapat menemukan:

menjelaskan lebar kolom yang optimal. Lebar kolom sebenarnya mungkin lebih lebar (untuk mengisi ruang yang tersedia), atau lebih sempit (hanya jika ruang yang tersedia lebih kecil dari lebar kolom yang ditentukan). ^ref

Hapus lebar dari elemen dan ubah ukuran wadah untuk memperhatikan ini:

.flex-container {
  width: 400px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
  overflow:hidden;
  resize:horizontal;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

Anda akan melihat bahwa celah memang tetap tetapi lebar kolom berubah.

Anda dapat menemukan detail lebih lanjut seputar algoritme di sini: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

Solusinya adalah dengan mempertimbangkan penggunaan grid CSS yang memiliki lebar kolom tetap. Caranya adalah dengan menentukan lebar kolom grid sama dengan gap + lebar kolom dan anda membuat container mengisi semua kolom (lebarnya akan menjadi pengali gap + lebar kolom )

Ubah ukuran layar untuk melihat hasilnya:

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
  overflow: hidden;
  resize: horizontal;
  border: 1px solid blue;

}

.flex-container {
  grid-column:1/-1;
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
  </div>
</div>

Answer 2

Jika Anda tidak menentukan jumlah kolom (parameter kedua ke kolom) maka sistem akan menghitung jumlah kolom yang mungkin (yaitu, mengambil otomatis sebagai parameter jumlah kolom).

Anda telah menentukan lebar kolom 'ideal' 120px dan item sebenarnya memiliki lebar kurang dari itu. Oleh karena itu, sistem menganggap Anda bisa mendapatkan 3 kolom ke dalam wadah dengan lebar 400px dan meletakkan dua kolom pertama sesuai dengan itu.

Ini beberapa info dari https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Properti CSS lebar kolom menetapkan lebar kolom yang ideal dalam tata letak multi-kolom. Penampung akan memiliki kolom sebanyak mungkin tanpa salah satu dari mereka memiliki lebar kurang dari nilai lebar kolom. Jika lebar penampung lebih sempit dari nilai yang ditentukan, lebar kolom tunggal akan lebih kecil dari lebar kolom yang dinyatakan.

Jika Anda ingin memastikan hanya ada dua kolom maka berikan parameter kedua:

columns: 120px 2;

.flex-container {
  height: 500px;
  width: 400px;
  border: 1px solid blue;
  columns: 120px 2;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>