Bertahun-tahun, CSS mengapung telah menjadi komponen yang rewel, namun perlu, dalam membuat tata letak situs web. Jika desain Anda membutuhkan banyak kolom, Anda beralih ke float. Masalah dengan metode ini adalah, terlepas dari kecerdikan luar biasa yang telah ditunjukkan oleh perancang/pengembang web dalam membuat situs yang kompleks. tata letak, CSS float tidak pernah benar-benar dimaksudkan untuk digunakan dengan cara ini.
Sementara pemosisian float dan CSS pasti memiliki tempat dalam desain web selama bertahun-tahun yang akan datang, tata letak yang lebih baru teknik termasuk CSS Grid dan Flexbox sekarang memberi desainer web cara baru 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 lama (terutama yang lebih tua versi Internet Explorer) telah mencegah banyak profesional web menggunakan gaya ini dalam produksi mereka kerja.
Dengan berakhirnya dukungan untuk versi IE yang lebih lama, beberapa desainer web sekarang bereksperimen dengan tata letak CSS baru pilihan, CSS Kolom disertakan, dan menemukan bahwa mereka memiliki lebih banyak kontrol dengan pendekatan baru ini daripada yang mereka lakukan dengan mengapung.
Dasar-dasar Kolom CSS
Seperti namanya, CSS Multiple Columns (juga dikenal sebagai CSS3 tata letak multi-kolom) memungkinkan Anda untuk membagi konten menjadi sejumlah kolom. Properti CSS paling dasar yang akan Anda gunakan adalah:
- jumlah kolom
- celah kolom
Untuk jumlah kolom, Anda menentukan jumlah kolom yang Anda inginkan. Celah kolom akan menjadi talang 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 praktiknya adalah membagi blok konten teks menjadi beberapa kolom, mirip dengan apa yang akan Anda lihat di artikel surat kabar. Katakanlah Anda memiliki markup HTML berikut (perhatikan bahwa untuk tujuan contoh, kami hanya menempatkan awal dari satu paragraf, sementara dalam praktiknya kemungkinan akan ada beberapa paragraf konten dalam markup ini):
Judul artikel Anda.
Bayangkan banyak paragraf teks di sini ...
Jika Anda kemudian menulis gaya CSS ini:
.kandungan {
-moz-kolom-hitungan: 3;
-webkit-kolom-jumlah: 3;
jumlah kolom: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
celah kolom: 30px;
}
Aturan CSS ini akan membagi pembagian "konten" menjadi 3 kolom yang sama dengan jarak 30 piksel di antaranya. Jika Anda menginginkan dua kolom, bukan 3, Anda cukup mengubah nilai itu dan browser akan menghitung lebar baru kolom tersebut untuk membagi konten secara merata. Perhatikan bahwa kita menggunakan properti awalan vendor terlebih dahulu, diikuti oleh deklarasi tanpa awalan.
Semudah ini, penggunaannya dengan cara ini dipertanyakan untuk penggunaan situs web. Ya, Anda dapat membagi banyak konten menjadi beberapa kolom, tetapi ini mungkin bukan bacaan terbaik pengalaman untuk web, terutama jika ketinggian kolom ini berada di bawah "lipatan" dari layar.
Pembaca kemudian harus menggulir ke atas dan ke bawah untuk membaca konten lengkapnya. Namun, prinsip Kolom CSS semudah yang Anda lihat di sini, dan dapat digunakan untuk melakukan lebih dari sekadar membagi konten beberapa paragraf—ia memang dapat digunakan untuk tata letak.
Tata Letak Dengan Kolom CSS
Katakanlah Anda memiliki halaman web dengan area konten yang memiliki 3 kolom konten. Ini adalah tata letak situs web yang sangat umum, dan untuk mencapai 3 kolom tersebut, Anda biasanya akan mengapungkan divisi yang ada. Dengan CSS multi-kolom, itu jauh lebih mudah.
Berikut adalah beberapa contoh HTML:
Dari Blog Kami.
Konten akan pergi ke sini…
Acara Mendatang.
Konten akan pergi ke sini…
CSS untuk membuat beberapa kolom ini dimulai dengan apa yang Anda lihat sebelumnya:
.kandungan {
-moz-kolom-hitungan: 3;
-webkit-kolom-jumlah: 3;
jumlah kolom: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
celah kolom: 30px;
}
Nah, tantangannya di sini adalah browser ingin membagi konten ini secara merata, jadi jika panjang konten dari pembagian ini berbeda, browser itu akan benar-benar membagi konten sebuah divisi individu, menambahkan awal ke satu kolom dan kemudian melanjutkan ke yang lain (Anda dapat melihat ini dengan menggunakan kode ini untuk menjalankan eksperimen dan menambahkan panjang konten yang berbeda di dalam masing-masing divisi).
Bukan itu yang Anda inginkan. Anda ingin masing-masing divisi ini membuat kolom yang berbeda dan, tidak peduli seberapa besar atau kecil konten masing-masing divisi, Anda tidak akan pernah ingin membaginya. Anda dapat mencapai ini dengan menambahkan satu baris CSS tambahan ini:
.konten div {
tampilan: blok sebaris;
}
Ini akan memaksa divisi yang ada di dalam "konten" untuk tetap utuh bahkan saat browser membaginya menjadi beberapa kolom. Lebih baik lagi, karena kami tidak memberikan apa pun di sini lebar tetap, kolom ini akan secara otomatis mengubah ukuran saat browser mengubah ukuran, menjadikannya aplikasi yang ideal untuk situs web responsif. Dengan gaya "blok inline" itu, masing-masing dari 3 divisi Anda akan menjadi kolom konten yang berbeda.
Menggunakan Lebar Kolom
Ada properti lain selain "jumlah kolom" yang dapat Anda gunakan, dan tergantung pada kebutuhan tata letak Anda, itu sebenarnya bisa menjadi pilihan yang lebih baik untuk situs Anda. Ini adalah "lebar kolom". Menggunakan markup HTML yang sama seperti yang ditunjukkan sebelumnya, kita bisa melakukan ini dengan CSS kita:
.kandungan {
-moz-column-width: 500px;
-webkit-column-width: 500px;
lebar kolom: 500px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
celah kolom: 30px;
}
.konten div {
tampilan: blok sebaris;
}
Cara kerjanya adalah browser menggunakan "lebar kolom" ini sebagai nilai maksimum kolom itu. Jadi jika lebar jendela browser kurang dari 500 piksel, 3 pembagian ini akan muncul dalam satu kolom, satu di atas yang lain. Ini adalah tata letak khas yang digunakan untuk tata letak seluler/layar kecil.
Saat lebar browser meningkat menjadi cukup besar untuk memuat 2 kolom bersama dengan celah kolom yang ditentukan, browser akan secara otomatis beralih dari tata letak kolom tunggal menjadi dua kolom. Terus tingkatkan lebar layar dan akhirnya, Anda akan mendapatkan desain 3 kolom, dengan masing-masing dari 3 divisi kami ditampilkan di kolomnya sendiri. Sekali lagi, ini adalah cara yang bagus untuk mendapatkan respons, ramah multi-perangkat tata letak, dan Anda bahkan tidak perlu menggunakan pertanyaan media untuk mengubah gaya tata letak!
Properti Kolom Lainnya
Selain properti yang dibahas di sini, ada juga properti untuk "aturan-kolom", termasuk nilai warna, gaya, dan lebar yang memungkinkan Anda membuat aturan di antara kolom Anda. Ini akan digunakan sebagai pengganti batas 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 grup yang tidak didukung itu sebenarnya hanyalah versi Internet Explorer yang jauh lebih lama yang tidak didukung lagi.
Dengan tingkat dukungan ini sekarang, tidak ada alasan untuk tidak mulai bereksperimen dengan Kolom CSS dan menerapkan gaya ini di situs web yang 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 untuk kebutuhan tata letak situs Anda.