Dito PriwantoPada seri Belajar CSS bagian 28, kita sudah membahas pengertian dan fungsi CSS !important untuk mengatur prioritas sebuah deklarasi CSS. Nah, pada bagian ke-29 dari seri belajar CSS ini, kita akan membahas properti yang dapat digunakan untuk membagi konten menjadi beberapa kolom, yaitu CSS Columns Property.
Properti ini cukup berguna ketika Anda ingin menampilkan teks atau konten dalam beberapa kolom tanpa harus membuat struktur HTML yang rumit. Dengan CSS Columns, pembagian konten menjadi beberapa kolom dapat dilakukan dengan lebih praktis dan fleksibel.
Apa Itu CSS Columns Property?
CSS Columns Property adalah sekumpulan properti CSS yang termasuk dalam modul Multi-column Layout. Properti ini digunakan untuk membagi satu blok konten menjadi beberapa kolom secara otomatis, mirip dengan tata letak teks pada koran atau majalah.
Berbeda dengan Flexbox atau CSS Grid yang umumnya digunakan untuk mengatur posisi dan ukuran beberapa elemen, CSS Columns bekerja pada satu blok konten. Konten di dalamnya akan mengalir secara otomatis dari satu kolom ke kolom berikutnya berdasarkan jumlah, lebar, atau tinggi kolom yang ditentukan.
Dengan pendekatan ini, Anda tidak perlu membuat banyak elemen HTML, seperti beberapa <div> terpisah, hanya untuk membagi teks menjadi beberapa kolom. Cukup menggunakan beberapa properti CSS, konten yang panjang dapat ditampilkan dalam format multi-kolom dengan lebih praktis.
CSS Columns cocok digunakan untuk konten yang didominasi teks, seperti artikel, e-book, dokumentasi, atau majalah online. Selain membuat tampilan lebih menyerupai media cetak, penggunaan kolom juga dapat membantu mengatur konten agar terlihat lebih rapi dan nyaman dibaca.
Fungsi CSS Columns Property
Beberapa fungsi utama dari CSS columns property antara lain:
- Meningkatkan keterbacaan teks: Kolom yang lebih sempit membuat mata pembaca tidak perlu bergerak terlalu jauh saat membaca satu baris teks, sehingga konten terasa lebih nyaman dibaca.
- Menghemat penulisan markup HTML: Tanpa perlu membungkus konten ke dalam banyak elemen pembungkus, cukup satu container saja yang diberi property columns.
- Membuat tata letak responsif menyerupai media cetak: Cocok digunakan untuk halaman yang ingin menampilkan nuansa seperti koran atau majalah digital.
- Fleksibilitas kontrol lebar dan jumlah kolom: Developer dapat menentukan apakah jumlah kolom yang tetap atau lebar kolom minimum yang diinginkan, dan browser akan menyesuaikan secara otomatis.
- Menambahkan elemen visual pemisah: Dengan bantuan property tambahan, kita bisa menambahkan garis pemisah antar kolom agar tampilan lebih terstruktur.
Jenis-Jenis Property dalam CSS Columns
CSS columns bukan hanya satu property tunggal, melainkan terdiri dari beberapa property yang saling melengkapi. Berikut penjelasannya satu per satu.
1. column-count
Property ini digunakan untuk menentukan jumlah kolom yang diinginkan secara langsung.
.container {
column-count: 3;
}2. column-width
Berbeda dengan column-count, property ini menentukan lebar ideal setiap kolom. Browser akan secara otomatis menghitung berapa banyak kolom yang bisa dibentuk berdasarkan lebar tersebut dan lebar container.
.container {
column-width: 200px;
}3. columns (shorthand)
Property columns adalah shorthand yang menggabungkan column-count dan column-width sekaligus dalam satu baris.
.container {
columns: 3 200px;
}4. column-gap
Property ini mengatur jarak atau celah antar kolom.
.container {
column-gap: 40px;
}5. column-rule, column-rule-width, column-rule-style, column-rule-color
Property ini digunakan untuk menambahkan garis pemisah visual di antara kolom, mirip seperti border, namun tidak memengaruhi lebar kolom.
.container {
column-rule: 2px solid #cccccc;
}Property ini juga bisa dipecah menjadi tiga bagian terpisah, yaitu column-rule-width, column-rule-style, dan column-rule-color, jika ingin pengaturan yang lebih detail.
6. column-span
Property ini berguna ketika ada elemen tertentu, seperti judul atau gambar, yang ingin ditampilkan melintasi seluruh lebar kolom, bukan hanya berada di satu kolom saja.
h2 {
column-span: all;
}7. column-fill
Property ini mengatur bagaimana konten didistribusikan ke dalam kolom, apakah secara seimbang (balance) atau memenuhi satu kolom terlebih dahulu sebelum berpindah ke kolom berikutnya (auto).
.container {
column-fill: balance;
}Contoh Implementasi CSS Columns Property
Agar lebih mudah dipahami, berikut contoh implementasi lengkap CSS columns property dalam sebuah halaman HTML sederhana.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh CSS Columns Property</title>
<style>
.artikel {
columns: 3 220px;
column-gap: 30px;
column-rule: 1px solid #dcdcdc;
column-fill: balance;
max-width: 900px;
margin: 0 auto;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.artikel h2 {
column-span: all;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="artikel">
<h2>Manfaat Membaca Buku Setiap Hari</h2>
<p>
Membaca buku secara rutin memberikan banyak manfaat, mulai dari
menambah wawasan, melatih fokus, hingga memperkaya kosakata.
Kebiasaan ini juga dapat menjadi sarana relaksasi di tengah
kesibukan sehari-hari.
</p>
<p>
Selain itu, membaca juga membantu meningkatkan kemampuan berpikir
kritis. Seseorang yang terbiasa membaca cenderung lebih mudah
menganalisis informasi dan mengambil keputusan secara logis.
</p>
<p>
Tidak hanya itu, membaca sebelum tidur juga dipercaya dapat
membantu menenangkan pikiran sehingga tidur menjadi lebih
berkualitas dibandingkan menatap layar gawai.
</p>
</div>
</body>
</html>Jika di akses menggunakan browser, maka tampilanya akan seperti berikut :
Pada contoh di atas, konten artikel akan otomatis terbagi menjadi tiga kolom dengan lebar minimum 220px, jarak antar kolom sebesar 30px, serta garis pemisah tipis berwarna abu-abu. Judul artikel juga dibuat melintasi seluruh kolom menggunakan column-span: all agar terlihat seperti judul utama pada layout majalah.
Tips Penggunaan CSS Columns Property
Agar penerapan CSS columns lebih optimal, ada beberapa hal yang perlu diperhatikan:
- Gunakan pada konten teks panjang, bukan pada elemen layout kompleks seperti navigasi atau kartu produk, karena untuk kebutuhan tersebut Flexbox atau Grid jauh lebih cocok.
- Perhatikan responsivitas, gunakan media query untuk mengurangi jumlah kolom pada layar yang lebih kecil agar teks tidak terlalu sempit dan sulit dibaca.
- Hindari elemen gambar atau tabel besar di dalam kolom tanpa pengaturan tambahan, karena elemen tersebut bisa terpotong saat berpindah ke kolom berikutnya.
- Kombinasikan dengan column-span: all untuk elemen penting seperti judul, kutipan, atau gambar utama agar tampilan tetap terstruktur.
Penutup
CSS Columns Property dapat menjadi solusi praktis untuk membuat tampilan konten dalam beberapa kolom tanpa harus menambah struktur HTML yang kompleks. Dengan memahami properti seperti column-count, column-width, columns, column-gap, column-rule, column-span, dan column-fill, Anda dapat mengatur konten agar lebih rapi, terstruktur, dan nyaman dibaca.
Pemanfaatannya juga dapat membuat tampilan konten berbasis teks menjadi lebih menarik, terutama pada artikel panjang, e-book, atau halaman yang menggunakan format seperti koran dan majalah. Namun, tetap perhatikan kebutuhan layout dan perangkat yang digunakan agar tampilan tetap nyaman di berbagai ukuran layar.
Jika Anda sedang belajar CSS, jangan berhenti sampai di bagian ini. Lanjutkan mengikuti seri Belajar CSS Rumahweb Journal untuk mempelajari berbagai properti dan teknik CSS lainnya secara bertahap. Semakin banyak konsep yang dipahami dan dipraktikkan, semakin mudah bagi Anda untuk membuat tampilan website yang rapi, responsif, dan sesuai kebutuhan.
