Selama bertahun-tahun, float CSS telah menjadi komponen yang rewel, namun perlu, dalam membuat tata letak situs web. Jika desain Anda memanggil beberapa kolom, Anda beralih ke pelampung . Masalah dengan metode ini adalah bahwa, meskipun kecerdasan luar biasa yang telah ditunjukkan oleh perancang web / pengembang dalam membuat tata letak situs yang kompleks, pelampung CSS tidak pernah benar-benar dimaksudkan untuk digunakan dengan cara ini.
Sementara mengapung dan posisi CSS yakin untuk memiliki tempat di desain web selama bertahun-tahun yang akan datang, teknik tata letak yang lebih baru termasuk CSS Grid dan Flexbox sekarang memberikan cara baru bagi desainer web untuk membuat tata letak situs mereka. Teknik tata letak baru lainnya yang menunjukkan banyak potensi adalah CSS Multiple Columns.
Kolom CSS telah ada selama beberapa tahun sekarang, tetapi kurangnya dukungan di browser yang lebih lama (terutama versi Internet Explorer yang lebih lama) telah membuat banyak profesional web menggunakan gaya ini dalam pekerjaan produksi mereka.
Dengan berakhirnya dukungan untuk IE versi lama tersebut, beberapa desainer web kini bereksperimen dengan opsi tata letak CSS baru, Kolom CSS disertakan, dan menemukan bahwa mereka memiliki lebih banyak kontrol dengan pendekatan baru ini dibandingkan dengan pelampung.
Dasar-dasar Kolom CSS
Seperti namanya, CSS Multiple Columns (juga dikenal sebagai tata letak multi-kolom CSS3) memungkinkan Anda membagi konten menjadi sejumlah kolom tertentu. Properti CSS paling dasar yang akan Anda gunakan adalah:
- hitungan kolom
- celah-kolom
Untuk hitungan kolom, Anda menentukan jumlah kolom yang Anda inginkan. Kesenjangan kolom akan menjadi selokan atau jarak antara kolom tersebut. Browser akan mengambil nilai-nilai ini dan membagi konten secara merata ke dalam jumlah kolom yang Anda tentukan.
Contoh umum dari beberapa kolom CSS dalam praktik adalah membagi blok konten teks menjadi beberapa kolom, mirip dengan apa yang akan Anda lihat di artikel koran. Katakanlah Anda memiliki markup HTML berikut (perhatikan bahwa untuk keperluan contoh, saya hanya meletakkan permulaan satu paragraf, sementara dalam praktiknya mungkin akan ada beberapa paragraf konten dalam markup ini):
Judul artikel Anda
Bayangkan banyak paragraf teks di sini ...
Jika Anda kemudian menulis gaya CSS ini:
.content {-moz-column-count: 3; -webkit-kolom-hitungan: 3; hitungan kolom: 3; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; }Aturan CSS ini akan membagi pembagian "konten" menjadi 3 kolom yang sama dengan jarak 30 piksel di antara mereka. Jika Anda menginginkan dua kolom, bukan 3, Anda cukup mengubah nilai itu dan browser akan menghitung lebar baru dari kolom tersebut untuk membagi konten secara merata. Perhatikan bahwa kami benar-benar menggunakan properti yang dipasangi vendor, diikuti oleh deklarasi non-prefixed.
Semudah ini, penggunaannya dengan cara ini dipertanyakan untuk penggunaan situs web. Ya, Anda dapat membagi banyak konten menjadi beberapa kolom, tetapi ini mungkin bukan pengalaman membaca terbaik untuk Web, terutama jika ketinggian kolom-kolom ini berada di bawah “lipatan” layar.
Pembaca kemudian harus menggulir ke atas dan ke bawah untuk membaca konten lengkap. Namun, prinsip Kolom CSS semudah yang Anda lihat di sini, dan dapat digunakan untuk melakukan lebih dari sekadar membagi konten dari beberapa paragraf - itu memang dapat digunakan untuk tata letak.
Tata Letak Dengan Kolom CSS
Katakan bahwa Anda memiliki halaman web dengan area konten yang memiliki 3 kolom konten. Ini adalah tata letak situs web yang sangat khas, dan untuk mencapai 3 kolom tersebut, Anda biasanya akan mengapung divisi yang ada. Dengan CSS multi-kolom, ini jauh lebih mudah.
Berikut beberapa contoh HTML:
Berita Terbaru
Konten akan masuk di sini ...
Dari Blog Kami
Konten akan masuk di sini ...
Acara Mendatang
Konten akan masuk di sini ...
CSS untuk membuat beberapa kolom ini dimulai dengan apa yang Anda lihat sebelumnya:
.content {-moz-column-count: 3; -webkit-kolom-hitungan: 3; hitungan kolom: 3; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; }Sekarang, tantangannya di sini adalah karena browser ingin membagi konten ini secara merata, jadi jika panjang konten dari divisi ini berbeda, browser itu akan benar-benar membagi konten dari divisi individual, menambahkan permulaannya ke satu kolom dan kemudian lanjutkan ke yang lain (Anda dapat melihat ini dengan menggunakan kode ini untuk menjalankan eksperimen dan menambahkan panjang konten yang berbeda di dalam setiap divisi)!
Bukan itu yang Anda inginkan. Anda ingin masing-masing divisi ini untuk membuat kolom yang berbeda dan, tidak peduli seberapa besar atau kecilnya konten divisi individu, Anda tidak ingin perpecahan itu terjadi. Anda dapat mencapai ini dengan menambahkan satu baris tambahan CSS ini:
.content div {display: inline-block; }Ini akan memaksa divisi-divisi yang berada di dalam "konten" untuk tetap utuh bahkan ketika browser membagi ini menjadi beberapa kolom. Bahkan lebih baik, karena kami tidak memberikan apa pun di sini dengan lebar tetap, kolom ini akan secara otomatis diubah ukurannya karena peramban mengubah ukuran, menjadikannya aplikasi yang ideal untuk situs web responsif . Dengan gaya "inline-block" di tempat, masing-masing dari 3 divisi Anda akan menjadi kolom konten yang berbeda.
Menggunakan Lebar-Kolom
Ada properti lain selain "kolom-hitungan" yang dapat Anda gunakan, dan tergantung pada kebutuhan tata letak Anda, itu sebenarnya bisa menjadi pilihan yang lebih baik untuk situs Anda. Ini adalah "kolom-lebar". Menggunakan markup HTML yang sama seperti yang ditunjukkan sebelumnya, kita bisa melakukan ini dengan CSS kami:
.content {-moz-column-width: 500px; -webkit-kolom-lebar: 500px; lebar kolom: 500px; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; } .content div {display: inline-block; }Cara kerjanya adalah browser menggunakan "lebar-kolom" ini sebagai nilai maksimum kolom itu. Jadi jika jendela browser kurang dari 500 piksel lebar, 3 divisi ini akan muncul dalam satu kolom, satu dari yang lain. Ini adalah tata letak yang biasa digunakan untuk tata letak layar seluler / kecil.
Ketika lebar peramban meningkat cukup besar untuk muat 2 kolom bersama dengan celah kolom yang ditentukan, peramban akan secara otomatis beralih dari satu kolom ke dua kolom. Terus meningkatkan lebar layar dan akhirnya, Anda akan mendapatkan desain 3 kolom, dengan masing-masing dari 3 divisi kami ditampilkan di kolom mereka sendiri. Sekali lagi, ini adalah cara yang bagus untuk mendapatkan beberapa tata letak ramah multiperangkat responsif, dan Anda bahkan tidak perlu menggunakan kueri media untuk mengubah gaya tata letak!
Properti Kolom Lainnya
Selain properti yang dicakup di sini, ada juga properti untuk "aturan kolom", termasuk warna, gaya, dan nilai lebar yang memungkinkan Anda membuat aturan di antara kolom Anda. Ini akan digunakan sebagai pengganti perbatasan jika Anda ingin memiliki beberapa garis yang memisahkan kolom Anda.
Saatnya Bereksperimen
Saat ini, CSS Multiple Column Layout didukung dengan sangat baik. Dengan awalan, lebih dari 94% pengguna web akan dapat melihat gaya ini, dan bahwa grup yang tidak didukung benar-benar akan menjadi versi Internet Explorer yang jauh lebih lama yang mungkin tidak Anda dukung lagi.
Dengan tingkat dukungan ini sekarang, tidak ada alasan untuk tidak mulai bereksperimen dengan CSS Columns dan menerapkan gaya ini di situs web siap produksi. Anda dapat memulai eksperimen menggunakan HTML dan CSS yang disajikan dalam artikel ini dan bermain-main dengan nilai yang berbeda untuk melihat apa yang paling sesuai dengan kebutuhan tata letak situs Anda.