Tata Letak Masonri: Pendekatan CSS dan JS

Tata letak bata menempatkan item dalam kolom, dengan setiap item mengisi ruang vertikal yang tersedia berikutnya, seperti pada Pinterest. Item memiliki lebar kolom yang sama, tetapi tinggi yang berbeda-beda. Hasilnya adalah kisi yang padat dan dinamis secara visual, tanpa ruang putih yang terbuang di antara baris.

Chrome dan Firefox, jika fitur di balik tanda pengaktifan diaktifkan, mendukung grid-template-rows: masonry. Item ditempatkan dalam kolom, tetapi ukuran baris mengikuti tinggi kontennya sehingga item dengan tinggi berbeda dapat tersusun rapat tanpa celah. Inilah solusi bawaan di masa depan.

Kolom CSS membuat tata letak seperti bata: columns: 3; column-gap: 1rem. Item mengalir dari atas ke bawah di dalam setiap kolom secara otomatis. Keterbatasannya: item diurutkan berdasarkan kolom (bagian atas kolom 1, bagian atas kolom 2...) bukan berdasarkan baris, sehingga memengaruhi urutan pembacaan dan aksesibilitas.

Cegah item terbelah di antara kolom: break-inside: avoid pada setiap item. Tanpa pengaturan ini, kartu yang tinggi dapat terbelah di antara dua kolom sehingga kontennya terpotong menjadi dua. Selalu tambahkan pengaturan ini ketika menggunakan kolom CSS untuk konten berbentuk kartu.

Masonry.js (oleh David DeSandro) mengatur ulang posisi item dengan posisi absolut dengan menghitung tinggi kolom dan menempatkan setiap item ke kolom yang paling pendek. Isotope memperluasnya dengan pengurutan dan penyaringan. Keduanya memerlukan JavaScript untuk menghitung dan menerapkan posisi.

Pendekatan ringan: tentukan kisi dengan kolom tetap dan baris 1px, lalu gunakan JS untuk menetapkan grid-row-end: span N pada setiap item berdasarkan tinggi konten / tinggi barisnya. Item mempertahankan perataan baris kisi sekaligus menghasilkan tinggi yang berbeda-beda.

Posisi tata letak bata menjadi usang ketika ukuran jendela berubah atau gambar selesai dimuat. Gunakan ResizeObserver untuk mendeteksi perubahan ukuran dan memicu perhitungan ulang. Beri jeda pada perhitungan ulang agar tidak terjadi komputasi berlebihan selama peristiwa pengubahan ukuran yang cepat.

Gambar dengan tinggi yang belum diketahui menyebabkan tata letak bata dihitung ulang setelah gambar selesai dimuat. Sediakan atribut lebar dan tinggi eksplisit pada semua gambar agar peramban menyediakan ruang sebelum pemuatan. Hal ini mencegah pergeseran posisi dan mengurangi jumlah proses perhitungan ulang.

Menambahkan item ke tata letak bata mengharuskan penghitungan ulang hanya pada kolom yang terdampak (kolom untuk item baru), bukan seluruh kisi. Pustaka seperti Masonry.js mendukung animasi item yang ditambahkan dan tata letak bertahap tanpa menata ulang seluruh kisi pada setiap kumpulan baru.

Urutan visual tata letak bata berbeda dari urutan DOM pada tata letak yang posisinya diatur oleh JavaScript. Pastikan urutan tombol Tab mengikuti urutan DOM (urutan pembacaan logis), bukan posisi visual. Tambahkan tabindex dengan hati-hati atau andalkan alur DOM alami untuk navigasi menggunakan papan ketik.

Kolom CSS: sederhana, tanpa JS, tetapi memiliki urutan pembacaan berdasarkan kolom (bukan baris) dan tidak mendukung penyaringan atau pengurutan. Tata letak bata pada Kisi: belum didukung untuk produksi. Tata letak bata dengan JS: fiturnya lengkap, tetapi menambah ukuran dan jeda tampilan karena posisi dihitung setelah konten dimuat.

Tata letak bata dapat dibuat dengan kolom CSS (sederhana, tetapi urutannya berdasarkan kolom), grid-template-rows: masonry yang masih eksperimental (menjanjikan untuk masa depan), atau pustaka JavaScript seperti Masonry.js (fiturnya lengkap dengan pengurutan dan penyaringan). Setiap pendekatan memiliki kompromi antara kesederhanaan, aksesibilitas, dan kemampuan.