Sebelum CSS3, kita biasanya membuat layout kolom dengan pertolongan CSS Float atau sistem grid. Tapi dikala ini kita bisa memakai CSS untuk membelah paragraf menjadi kolom-kolom. Meskipun fiturnya masih terbatas, yaitu hanya bisa membelah, memilih jarak antar kolom dan memberi garis pemisah, tapi secara keseluruhan, CSS kolom sudah bisa dikatakan sangat membantu terutama sebab kemampuannya dalam mengisi setiap kolom dengan jumlah teks yang sama rata.
Sintaks CSS Kolom
p { -webkit-column-count:3; /* Chrome & Safari */ -moz-column-count:3; /* Firefox */ column-count:3; /* Standar CSS3 & Opera */ }Kode di atas akan membelah paragraf menjadi tiga buah kolom sama besar.
Properti CSS kolom pada peramban Opera sudah mengikuti standar CSS3 dan tidak memerlukan prefiks -o- menyerupai pada umumnya. Sampai dikala ini Internet Explorer masih belum mendukung CSS Kolom.
Jarak dan Pembatas
Selain memilih jumlah kolom, CSS kolom juga bisa memilih jarak antar kolom dan juga mengatur garis pembatas antar kolom. Berikut ini yaitu pola cara memilih jarak antar kolom sebesar 100px:
p { -webkit-column-gap:100px; -moz-column-gap:100px; column-gap:100px; }Untuk membuat garis pembatas antar kolom, kita memakai properti column-rule yang intinya mempunyai cara kolaborasi persis dengan properti border:
p { -webkit-column-rule:5px solid #ccc; -moz-column-rule:5px solid #ccc; column-rule:5px solid #ccc; }Dan menyerupai halnya properti border, mereka juga bisa dibagi kembali menjadi tiga properti yang terpisah:
/* column-rule:column-rule-width column-rule-style column-rule-color; */ p { -webkit-column-rule-width:5px; -moz-column-rule-width:5px; column-rule-width:5px; -webkit-column-rule-style:solid; -moz-column-rule-style:solid; column-rule-style:solid; -webkit-column-rule-color:#ccc; -moz-column-rule-color:#ccc; column-rule-color:#ccc; }Membuatnya Menjadi Responsif
Meskipun CSS Kolom akan secara otomatis menyesuaikan lebar masing-masing kolom dengan ukuran lebar elemen pembungkus menyerupai halnya dikala kita memakai satuan persentase, tapi dikala ukuran layar menyempit, kolom-kolom di dalamnya juga akan ikut menyempit dan membuat kalimat-kalimat di dalamnya menjadi sulit untuk dibaca. Untuk menyiasatinya, kita bisa memakai media queries dan mengurangi jumlah kolom ketika ukuran layar sedang berada pada ukuran lebar tertentu:
/* Ubah jumlah kolom menjadi 2 dikala lebar layar maksimal berada pada 800 piksel */ @media screen and (max-width:800px) { p { -webkit-column-count:2; -moz-column-count:2; column-count:2; } } /* Satukan semua kolom dikala lebar layar maksimal berada pada 600 piksel */ @media screen and (max-width:600px) { p { -webkit-column-count:auto; -moz-column-count:auto; column-count:auto; } }Lebar Kolom Tetap
CSS Kolom juga memungkinkan Anda untuk membuat kolom-kolom dengan lebar yang tetap, yaitu dengan memakai properti column-width:
p { -webkit-column-width:150px; -moz-column-width:150px; column-width:150px; }Cara kerja properti ini yaitu beliau akan membuat kolom sebanyak mungkin dengan lebar masing-masing kolom sebesar 150 piksel (berdasarkan pola di atas) selama masih ada ruang yang tersisa di sebelahnya.
Anda tidak perlu mendeklarasikan properti column-count jikalau Anda telah memakai properti ini. Jumlah kolom akan mengikuti keadaan terhadap lebar area yang tersisa. Untuk penerapan yang lebih mendetail bisa Anda baca di halaman ini ⇒ Efek Masonry Hanya dengan CSS