CSS Multi-column membagi konten menjadi beberapa kolom, seperti koran.

.artikel {
  column-count: 3;     /* jumlah kolom */
  column-gap: 24px;    /* jarak antar kolom */
  column-rule: 1px solid #ccc; /* garis pemisah */
}

Property penting:

• column-count — jumlah kolom
• column-width — lebar minimum kolom (browser menentukan jumlah)
• column-gap — jarak antar kolom
• column-rule — garis pemisah (seperti border)
• column-span: all — elemen merentang semua kolom

.artikel h2 {
  column-span: all; /* judul merentang semua kolom */
}

Multi-column cocok untuk konten teks panjang. Untuk layout komponen, gunakan Grid.

🎭 Analogi sehari-hari

Pernah baca koran lebar yang barisnya panjang banget sampai kepala harus geleng kanan-kiri buat baca? Capek kan. Editor koran tahu ini — makanya artikel selalu dipecah jadi kolom-kolom sempit. Mata gampang scan vertikal tanpa lompatan jauh. CSS multi-column ngasih kekuatan layout koran ke web kamu — paragraf panjang yang awalnya jadi tembok teks bisa dipecah jadi 2-3 kolom rapi yang nyaman dibaca.

⚠️ Jebakan yang sering ditemui

• column-count vs column-width — count fix jumlah, width fix lebar (browser hitung jumlah). Kombinasi: pakai salah satu.
• Konten BISA pecah di tengah elemen — gambar/heading bisa terbagi 2 kolom. Pakai break-inside: avoid untuk cegah.
• Multi-column tidak responsif tanpa media query — fixed column-count = jelek di mobile. Pakai column-width + auto.
• Tidak cocok untuk LAYOUT KOMPONEN — pakai Flex/Grid untuk app UI.
• Bisa kombinasi dengan column-span: all untuk heading lintas kolom.

TL;DR: Multi-column = pecah konten jadi kolom kayak koran. Property: column-count (jumlah fix), column-width (lebar minimum, browser auto-tentuin jumlah — lebih responsive), column-gap, column-rule (garis pemisah). column-span: all buat heading lintas kolom. Pakai break-inside: avoid biar gambar/heading gak kepecah 2 kolom. Cocok buat teks panjang, BUKAN layout komponen (pakai Flex/Grid).