Jika Anda membutuhkan jumlah kolom yang tepat saat mendesain tata letak multi-kolom, gunakan column-count.
.lead ( column-count: 3; )Mengingat jumlah kolom, browser akan mendistribusikan konten secara merata dalam jumlah kolom yang sama.
Properti ini juga dapat digunakan dalam singkatan untuk columnsdan dapat digunakan bersama-sama column-width. Ketika kedua properti dideklarasikan column-countadalah jumlah kolom maksimum.
Nilai
column-countbisa autoatau integer.
Gunakan autojika Anda juga menggunakan column-width. Anggap saja sebagai cara memberi tahu browser, membiarkan column-widthyang memimpin.
Bilangan bulat, juga dikenal sebagai jumlah kolom, harus lebih besar dari atau sama dengan 0.
Tidak seperti column-widthproperti ini, properti akan menahan jumlah kolom terlepas dari lebar browser. Ini berarti bahwa jika Anda menampilkan tata letak 5 kolom pada ponsel Anda, Anda akan memiliki tata letak 5 kolom yang sangat rapi untuk dinavigasi. column-countbekerja paling baik bersama column-width.
Dukungan Browser
Dukungan tata letak multi-kolom:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Jangan lupa awalan Anda jika Anda tidak menggunakan alat bantu yang sudah membantu.