Multi-column membagi teks panjang jadi beberapa kolom berdampingan, kayak artikel di koran. Kamu cukup bilang berapa kolomnya, lalu browser yang memotong teksnya dan mengalirkannya dari satu kolom ke kolom berikutnya. Baris yang pendek lebih enak dibaca daripada satu baris panjang selebar layar.
🧪 Tebakan cepat: ada empat paragraf dalam tiga kolom. Paragraf kedua muncul di sebelah kanan paragraf pertama, atau di bawahnya? Tebak dulu, jawabannya ada di bagian "Teks jadi beberapa kolom".
Teks jadi beberapa kolom
.text {
column-count: 3;
column-gap: 20px;
column-rule: 2px solid #d1d5db;
}
column-count: 3membagi isi.textjadi tiga kolom. Browser yang menentukan di mana teksnya dipotong.column-gap: 20pxmemberi jarak 20px di antara kolom.column-rule: 2px solid #d1d5dbmenggambar garis abu-abu di tengah jarak itu. Cara nulisnya sama kayakborder: tebal, gaya, warna. Garis ini boleh gak dipakai.
Hasilnya, teks mengisi kolom pertama dari atas ke bawah, lalu lanjut di atas kolom kedua, lalu kolom ketiga. Urutannya ke bawah dulu, baru ke kanan. Jadi paragraf kedua muncul di bawah paragraf pertama, bukan di sebelahnya. Itu jawaban tebakannya.
Judul yang melintasi semua kolom
.artikel h2 {
column-span: all;
}
column-span: all membentangkan heading h2 selebar semua kolom. Teks di atasnya dan di bawahnya tetap berkolom.
Jaga kartu tetap utuh
Teks dipotong kayak halaman cetak, jadi satu paragraf atau kartu bisa terbelah: separuh di bawah kolom kiri, separuh lagi di atas kolom kanan. break-inside: avoid di elemen itu menahannya tetap utuh di satu kolom:
.text p {
break-inside: avoid;
}
⚠️ Jebakan yang sering ketemu
- Dipakai buat layout halaman. Sidebar dan konten itu dua area yang berbeda, bukan satu aliran teks. Pakai Grid atau Flexbox.
- Kartu yang harus urut ke samping. Di multi-column, kartu kedua muncul di bawah kartu pertama. Kalau urutannya harus kiri ke kanan, pakai Grid.
- Jumlah kolom tetap di layar HP. Tiga kolom di layar sempit jadi sempit banget. Pakai
column-width(lihat di bawah) atau ubah jumlahnya di media query.
💡 Biarkan browser menghitung jumlah kolomnya.
column-width: 250pxartinya "tiap kolom minimal sekitar 250px". Browser memasang kolom sebanyak yang muat: satu di HP, lebih banyak di layar lebar.
TL;DR: column-count menentukan jumlah kolom, column-gap jarak antar kolom, column-rule garis di tengah jarak itu. Teksnya mengalir ke bawah dulu, baru pindah ke kolom kanan. column-span: all bikin heading melintasi semua kolom, break-inside: avoid menjaga kartu atau paragraf gak terbelah. Pakai buat teks panjang, bukan buat layout halaman.
