CSS Multi-Kolom Generator
Buat tata letak multi-kolom gaya koran dengan pratinjau langsung. Sesuaikan kolom, jarak, gaya, dan lebar aturan.
Apa Itu CSS Multi-Column Layout
CSS Multi-column Layout (spesifikasi W3C "CSS Multi-column Layout Module Level 1") mengalirkan ulang konten dari satu elemen di dua kolom atau lebih secara otomatis: cara yang sama yang telah ditangani percetakan koran dan majalah untuk teks panjang selama berabad-abad. Anda mendeklarasikan berapa banyak kolom yang Anda inginkan (atau seberapa lebar setiap kolom seharusnya), dan browser mendistribusikan konten dari atas ke bawah, dari kiri ke kanan, menyeimbangkan jumlah baris sehingga setiap kolom berakhir pada tinggi yang kurang lebih sama. Modul ini menjadi W3C Candidate Recommendation pada April 2011 dan dirilis dalam bentuk yang dapat digunakan di seluruh browser antara Firefox 3.5 (Juni 2009) dan IE 10 (Oktober 2012). Itu telah menjadi fitur web platform dasar selama lebih dari satu dekade. Tidak seperti Flexbox atau Grid: yang menyelaraskan elemen anak diskrit ke posisi yang diketahui: layout multi-kolom memperlakukan konten sebagai aliran kontinu tunggal yang dipotong-potong oleh browser menjadi kolom berdasarkan tinggi yang tersedia.
Kapan CSS Columns Adalah Alat yang Tepat
- Teks artikel panjang pada layar lebar. Membaca teks satu kolom yang lebih lebar dari ~75 karakter membebani mata: pandangan pembaca harus berjalan terlalu jauh untuk menemukan awal baris berikutnya. Layout dua kolom membagi panjang baris sambil menggunakan ruang vertikal yang sama, secara dramatis meningkatkan keterbacaan pada tampilan layar lebar.
- Daftar definisi dan glosarium. Daftar alfabet panjang dari item pendek membungkus secara alami menjadi beberapa kolom tanpa perlu menyeimbangkannya secara manual.
- Daftar tautan footer. Footer "site map" klasik dengan puluhan tautan: kategori ke bawah, tautan menyilang: cocok secara alami untuk column-count.
- Daftar fitur dan enumerasi berbutir. Daftar fitur panjang yang akan menggulir selamanya dalam satu kolom membaca lebih baik sebagai dua atau tiga.
- Stylesheet cetak. Layout multi-kolom adalah salah satu dari sedikit fitur CSS yang menerjemahkan dengan indah ke cetakan: format yang telah digunakan koran sejak mereka ditemukan.
column-count vs column-width: Perbedaan yang Paling Penting
Dua cara untuk menentukan kolom, dan pilihannya penting untuk desain responsif. column-count: 3 mengkode keras tiga kolom: pada lebar viewport berapa pun, browser menghasilkan tepat tiga kolom, menjadi lebih sempit saat container menyempit. Pada ponsel, tiga kolom menjadi sliver tipis yang tidak terbaca. column-width: 250px sebagai gantinya meminta kolom "setidaknya 250 piksel lebar"; browser menghitung berapa banyak yang muat dalam container dan mengalirkan ulang secara otomatis saat viewport berubah. Layar lebar mendapatkan banyak kolom, layar sempit mendapatkan sedikit atau satu: tanpa satu media query pun. Pola kombinasi adalah praktik terbaik modern: columns: 250px 4 (singkatan untuk column-width plus column-count) berarti "kolom selebar 250px, tetapi tidak pernah lebih dari 4." Browser menghasilkan 4 kolom pada desktop lebar, lebih sedikit pada tablet, satu pada ponsel: secara otomatis responsif. Sebagian besar CSS produksi menggunakan bentuk kombinasi ini untuk manfaat ketahanan.
Mengontrol Tempat Konten Putus
Secara default browser memutus kolom di mana pun ia mendarat: yang kadang-kadang memisahkan judul dari paragraf pertamanya, atau memotong kartu menjadi dua. Properti CSS break-inside: avoid (CSS Fragmentation Module Level 3) memberi tahu browser "jangan pisahkan elemen ini di seluruh kolom": biasanya diterapkan pada kartu, gambar, dan konten apa pun yang harus tetap bersama. break-before: column memaksa break kolom sebelum elemen, berguna untuk "mulai setiap bagian di kolom baru." column-span: all membuat judul atau callout merentang lebar penuh di semua kolom, keluar dari aliran kolom: tipikal untuk judul artikel di atas badan multi-kolom.
Jebakan yang Perlu Diperhatikan
Layout multi-kolom memiliki interaksi halus yang perlu diketahui. Urutan baca pada pembaca layar mengikuti urutan DOM, yang umumnya sama dengan urutan kolom dari atas ke bawah secara visual: tetapi teknologi bantu kadang-kadang bisa bingung pada layout yang kompleks. Paginasi cetak dengan multi-kolom dapat menghasilkan penyeimbangan kolom yang aneh di seluruh page break; uji dengan stylesheet cetak jika Anda peduli dengan output cetak. Konten panjang mengisi ke bawah: jika Anda memberi container multi-kolom tinggi tetap yang lebih pendek dari yang dibutuhkan konten, konten akan meluap; jika Anda tidak membatasi tinggi, browser menyeimbangkan kolom ke panjang yang kurang lebih sama. Konten yang berlabuh (formulir, elemen interaktif yang perlu tetap di satu tempat) bekerja dengan buruk dalam kolom karena pengguna tidak dapat mengetahui ke mana harus melihat. Mencampur dengan Grid atau Flexbox pada level yang sama menghasilkan hasil yang tidak dapat diprediksi: pilih satu metode layout per container.
Properti CSS yang dihasilkan
- column-count, jumlah kolom tetap
- column-width, lebar minimum kolom untuk tata letak responsif
- column-gap, jarak antar kolom
- column-rule, garis dekoratif antara kolom (lebar, gaya, warna)
- column-span, elemen yang membentang di semua kolom (heading)