Saat Anda ingin mempertahankan kolom Anda pada lebar tertentu, gunakan column-width
.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )
Browser akan menghitung berapa banyak kolom dengan lebar setidaknya yang dapat muat di dalam ruang. Anggap saja column-width
sebagai saran lebar minimum untuk browser.
column-width
adalah properti yang fleksibel. Setelah browser tidak dapat memuat setidaknya 2 kolom pada lebar yang Anda tentukan, maka kolom akan berhenti dan jatuh ke dalam satu kolom.
Properti ini juga digunakan dalam singkatan untuk columns
dan dapat digunakan bersama-sama column-count
. Ketika kedua properti dideklarasikan column-count
adalah jumlah kolom maksimum.
Nilai
Anda dapat mengatur column-width
ke auto
atau panjang.
Gunakan auto
jika Anda juga menggunakan column-count
atau jika Anda perlu mematikan properti. Anggap saja sebagai cara memberi tahu browser untuk membiarkan column-count
yang memimpin.
Untuk menentukan lebar kolom, gunakan panjang yang lebih besar dari (atau sama dengan) 0. Anda dapat menggunakan unit CSS apa pun kecuali untuk persentase.
Dukungan Browser
Dukungan tata letak multi-kolom:
Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
---|---|---|---|---|---|---|
Apa saja | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Jangan lupa awalan Anda!