Properti column-fill menentukan bagaimana konten didistribusikan dan diisi ke dalam kolom dalam tata letak multi-column.

Menggunakan properti ini, Kalian dapat mengontrol apakah kolom harus seimbang, atau tidak.

Jika kolom tidak disetel menjadi seimbang, kolom itu diisi secara berurutan; beberapa kolom mungkin sebagian terisi, atau tanpa konten sama sekali. Jika mereka seimbang, browser (atau agen penggunaan lainnya) akan melakukan yang terbaik sehingga ketinggian mereka sedekat mungkin. Ini harus mencoba untuk meminimalkan variasi ketinggian kolom, sementara menghormati jeda paksa, jKalian dan anak yatim, dan properti lainnya yang dapat mempengaruhi ketinggian kolom.

Efek isi kolom sebagian besar jelas ketika ketinggian elemen multi-column ditentukan. Gambar berikut menunjukkan perbedaan antara tata letak multi-column yang kolomnya tidak seimbang, dan yang kolomnya seimbang menggunakan column-fill.

Perhatikan bagaimana dua kolom pertama diisi dan yang ketiga setengah penuh di tata letak pertama, sementara keduanya sama tingginya di tata letak seimbang.

Syntax:

 

Values:

  • auto: Isi kolom secara berurutan. Ketinggian yang sama bukan tujuan atau persyaratan.
  • balance: Seimbangkan konten secara merata di antara kolom, sejauh mungkin. Di media halaman, hanya halaman terakhir yang seimbang.
  • balance-all: Seimbangkan konten secara merata di antara kolom, sejauh mungkin. Di media halaman, semua halaman seimbang.

 

Contoh: