Saat Anda menambahkan tinggi ke elemen multi-kolom, Anda bisa mengontrol bagaimana konten mengisi kolom. Konten dapat diseimbangkan atau diisi secara berurutan.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )
Properti ini hanya tersedia di Firefox. Firefox secara otomatis akan menyeimbangkan konten dalam tata letak multi-kolom dengan batasan ketinggian. Browser lain akan selalu mengisi kolom secara berurutan saat diberi batasan ketinggian.
Untuk membuat Firefox berperilaku seperti browser lainnya, yaitu mengisi kolom secara berurutan, Anda dapat mengaturnya column-fill: auto
.
Nilai
column-fill
menerima nilai kata kunci balance
dan auto
.
balance
akan mengisi setiap kolom dengan jumlah konten yang hampir sama, tetapi tidak akan memungkinkan kolom tumbuh lebih tinggi dari height
. Anda mungkin menemukan bahwa kolom akan tampil lebih pendek daripada height
saat browser mendistribusikan konten secara merata secara horizontal.
auto
akan mengisi setiap kolom hingga mencapai height
dan melakukan ini hingga kehabisan konten. Mengingat isinya, nilai ini tidak serta merta mengisi semua kolom atau mengisinya secara merata.
Ini seperti menuangkan jus ke dalam gelas. Anda dapat menuangkan jus dengan jumlah yang sama ke dalam setiap gelas dan menemukan bahwa Anda tidak mengisi setiap gelas sampai atas ( balance
). Cara lainnya, Anda dapat mengisi gelas sampai penuh dan ulangi hingga tidak ada jus yang tersisa. Akibatnya, sisa gelas mungkin memiliki lebih sedikit atau tidak ada jus ( auto
).
Lihat contoh isi kolom Pena (CSS-Trik) oleh CSS-Tricks (@ css-trick) di CodePen.
Dukungan Browser
Nilai column-fill
kata kunci secara khusus berfungsi di Firefox. Mereka tidak berfungsi pada Agustus 2014 saat entri Almanak ini aslinya ditulis, tetapi berfungsi lagi saat diuji lagi pada Agustus 2015 (Chrome 44). Selama pengujian tersebut, tampaknya mengubah nilai secara dinamis tidak diperlukan, Anda harus memaksa relai keluar.
Dukungan browser untuk tata letak multi-kolom secara umum:
Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
---|---|---|---|---|---|---|
Apa saja | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Jangan lupa awalan Anda!