Dipublikasikan: 14 Januari 2026
Mulai Chrome 145, properti column-wrap dan column-height dari
spesifikasi tata letak multi-kolom level dua
didukung.
Dengan properti ini, Anda dapat memindahkan kolom ke baris baru
dalam arah blok.
Sebelum Chrome 145, jika tinggi penampung multi-kolom dibatasi, konten yang tidak sesuai dengan ruang yang tersedia akan muncul sebagai kolom yang meluap dalam arah inline. Tindakan ini akan membuat scrollbar horizontal di web.
Dengan properti column-height dan column-wrap, Anda dapat menetapkan tinggi untuk
baris kolom dan menetapkan kolom yang meluap agar muncul sebagai baris baru.
Kemampuan untuk membuat baris kolom baru memberikan solusi untuk situasi saat ini, di mana pilihan Anda adalah membuat orang men-scroll ke atas dan ke bawah untuk membaca kolom, atau mengambil risiko scrollbar horizontal dalam situasi ketika jumlah konten tidak dapat diprediksi.
Tata letak ini juga memungkinkan pola seperti carousel arah blok, tempat kolom dibuat yang mengisi tinggi area pandang yang tersedia. Untuk membaca baris kolom berikutnya, Anda men-scroll ke layar berikutnya dalam arah blok.
Menciptakan pengalaman membaca yang jelas
Dengan beberapa baris kolom, pengalaman membaca yang tidak jelas dapat terjadi, di mana pembaca tidak menyadari bahwa ada beberapa baris, dan mereka melewati celah untuk terus membaca ke bawah kolom. Hal ini harus dipertimbangkan dalam desain UI Anda. Kemampuan mendatang untuk menambahkan dekorasi di jarak baris akan memberi Anda alat tambahan untuk membuat perbedaan visual ini.
Aturan baris akan segera hadir
Spesifikasi multicol level 1 mencakup properti untuk menata gaya column-rule; aturan ini ditempatkan di celah antara kolom. Properti untuk menata aturan baris disertakan dalam spesifikasi Dekorasi Ruang CSS baru, yang saat ini dalam uji coba developer. Setelah stabil, Anda dapat menambahkan aturan baris dan kolom di petak, flexbox, dan multicol.