Mengisi kolom - Trik CSS

Daftar Isi

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-fillmenerima nilai kata kunci balancedan auto.

balanceakan 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 heightsaat browser mendistribusikan konten secara merata secara horizontal.

autoakan mengisi setiap kolom hingga mencapai heightdan 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-fillkata 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: