column-width
Properti CSS column-width memungkinkan kamu untuk meletakkan konten elemen dalam beberapa kolom dengan menentukan
nilai lebar kolom yang kemudian digunakan browser untuk membuat sejumlah kolom untuk meletakkan konten.
Jumlah kolom yang tepat tergantung pada ruang yang tersedia, atau pada jumlah tertentu yang dapat kamu tentukan
menggunakan properti column-count.
Lebar kolom dan jumlah kolom bisa diatur menjadi fleksibel agar browser dapat menghitung jumlah kolom berdasarkan ruang yang tersedia.
Sehingga untuk membuat layout yang responsif lebih mudah.
Misalnya, jika kamu mengatur lebar kolom ke 12em, secara praktis kolom akan memiliki lebar 12em.
Namun jika ternyata ruang yang tersedia kurang dari 12em, hanya akan ada satu kolom yang lebarnya terbatas pada ruang
yang tersedia.
CSS Syntax
column-gap: length | normal | initial | inherit;
Javascript Syntax
object.style.columnWidth="100px"
Property Values
default
column-width: auto;
column-count ditentukan. Dalam hal itu, lebar kolom akan disimpulkan dari jumlah kolom.column-width: 10px;
Kamu dapat menggunakan nilai piksel untuk lebar kolom.
Jumlah kolom akan menjadi minimum yang dibutuhkan untuk mendistribusikan semua konten di seluruh elemen.