Cara Membuat Masonry Layout dengan CSS Grid dan JavaScript

Masonry layout menyusun item dengan tinggi berbeda ke dalam kolom-kolom rapi, seperti susunan bata. CSS Grid belum punya properti bawaan untuk masonry, tetapi Anda bisa menggabungkannya dengan JavaScript untuk menghitung posisi tiap item. Berikut cara membuat masonry layout dengan CSS Grid dan JavaScript.

Alasan memakai CSS Grid dan JavaScript

Grid dua dimensi memudahkan pengaturan kolom, sementara JavaScript menangani perhitungan tinggi item yang tidak seragam. Pendekatan ini ringan dan tidak memerlukan library eksternal. Anda bisa mengontrol jumlah kolom dan jarak antar item.

Menyiapkan struktur HTML

Mulai dengan wadah grid dan sejumlah item. Setiap item bisa berupa gambar atau kartu konten. Pastikan setiap item memiliki kelas yang sama agar mudah dipilih.

<div class="masonry">
  <div class="item">Konten 1</div>
  <div class="item">Konten 2</div>
  <div class="item">Konten 3</div>
  <!-- tambahkan lebih banyak item -->
</div>

Gaya dasar dengan CSS Grid

Atur wadah menjadi grid dengan jumlah kolom yang diinginkan. Gunakan grid-template-columns dengan satuan fr agar kolom fleksibel. Beri jarak antar item dengan gap.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.item {
  background: #f0f0f0;
  padding: 16px;
  border-radius: 8px;
}

Dengan pengaturan ini, semua item akan memiliki tinggi yang sama karena grid meratakan baris. Untuk mendapatkan efek masonry, kita perlu mengatur tinggi item secara individual.

Menghitung posisi dengan JavaScript

JavaScript akan membaca tinggi setiap item dan menempatkannya di kolom yang paling pendek. Pertama, tentukan jumlah kolom dan lebar kolom. Kemudian, loop melalui item dan atur grid-row-end serta grid-column secara dinamis.

Berikut fungsi sederhana yang bisa Anda gunakan:

function layoutMasonry() {
  const grid = document.querySelector('.masonry');
  const items = grid.querySelectorAll('.item');
  const columns = 3;
  const gap = 16;
  const colHeights = new Array(columns).fill(0);

  items.forEach(item => {
    const minHeight = Math.min(...colHeights);
    const colIndex = colHeights.indexOf(minHeight);
    item.style.gridColumn = colIndex + 1;
    item.style.gridRowEnd = `span ${Math.ceil(item.offsetHeight / 10)}`;
    colHeights[colIndex] += item.offsetHeight + gap;
  });
}

Fungsi di atas menggunakan grid-row-end dengan span untuk menyesuaikan tinggi. Anda perlu menyesuaikan pembagi (10) dengan tinggi baris grid yang Anda tentukan. Misalnya, jika grid-auto-rows: 10px;, maka setiap span mewakili 10px.

Menentukan tinggi baris grid

Agar perhitungan span akurat, atur grid-auto-rows ke nilai kecil, misalnya 10px. Dengan begitu, setiap item akan menempati sejumlah baris sesuai tingginya.

.masonry {
  grid-auto-rows: 10px;
}

Setelah itu, panggil layoutMasonry() setelah semua item dimuat. Jika ada gambar, tunggu hingga gambar selesai dimuat agar tinggi akurat.

Menangani resize dan gambar

Layout masonry perlu diperbarui saat ukuran jendela berubah. Tambahkan event listener resize yang memanggil fungsi layout dengan debounce untuk menghindari eksekusi berlebihan.

Untuk gambar, gunakan event load pada masing-masing gambar atau Promise.all untuk menunggu semua gambar selesai dimuat sebelum menghitung layout.

window.addEventListener('resize', debounce(layoutMasonry, 200));

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

Pastikan juga untuk memanggil layout setelah konten dinamis ditambahkan.

Alternatif: CSS Columns

Jika tidak ingin menggunakan JavaScript, CSS Columns bisa menjadi alternatif sederhana. Namun, urutan item akan mengalir dari atas ke bawah lalu ke kolom berikutnya, bukan dari kiri ke kanan. Untuk galeri foto, ini mungkin cukup.

.masonry {
  column-count: 3;
  column-gap: 16px;
}
.item {
  break-inside: avoid;
  margin-bottom: 16px;
}

Kekurangannya, Anda tidak bisa mengontrol urutan item secara horizontal. Jika urutan penting, tetap gunakan Grid dan JavaScript.

Tips tambahan

• Gunakan box-sizing: border-box agar padding tidak mempengaruhi perhitungan tinggi.
• Untuk performa, hindari layout berulang saat scroll. Cukup panggil saat resize atau setelah konten berubah.
• Jika menggunakan gambar, tetapkan width: 100% dan height: auto agar proporsional.

Masonry layout dengan CSS Grid dan JavaScript memberikan kontrol penuh atas susunan item. Anda bisa mengatur jumlah kolom, jarak, dan bahkan menambahkan animasi. Untuk layout responsif, Anda bisa mengombinasikan teknik ini dengan CSS Grid untuk layout responsive yang sudah dibahas sebelumnya. Jika Anda ingin memperdalam Flexbox, ada juga panduan belajar CSS Flexbox yang bisa membantu.

Untuk mengukur kualitas jaringan saat mengembangkan aplikasi web yang membutuhkan koneksi stabil, Anda bisa menggunakan cara cek ping dengan CMD. Selain itu, jika Anda perlu membersihkan akun media sosial lama yang tidak terpakai, ikuti cara menghapus akun media sosial lama dengan aman.

Ringkasan

Membuat masonry layout dengan CSS Grid dan JavaScript memerlukan perhitungan tinggi item dan penempatan di kolom terpendek. Dengan langkah di atas, Anda bisa membuat galeri foto atau daftar konten yang rapi dan responsif.

Pertanyaan yang sering diajukan

Apakah CSS Grid sudah mendukung masonry secara native?

Belum. Saat ini, masonry layout belum menjadi standar di CSS Grid. Namun, ada usulan spesifikasi yang sedang dikembangkan. Untuk sekarang, gunakan JavaScript atau CSS Columns sebagai alternatif.

Bagaimana cara membuat masonry layout responsif?

Anda bisa mengubah jumlah kolom berdasarkan lebar layar menggunakan media query. Di JavaScript, sesuaikan variabel columns dengan lebar jendela, lalu panggil ulang fungsi layout saat resize.

Apakah masonry layout cocok untuk semua jenis konten?

Masonry cocok untuk konten dengan tinggi bervariasi seperti galeri foto, kartu produk, atau artikel. Untuk konten yang tingginya seragam, grid biasa lebih efisien.