css grid layout 2 dimensi

Untuk membuat galeri foto dengan gaya Masonry Editorial yang elegan, kita akan menggunakan CSS Grid. Berbeda dengan grid biasa yang kaku, kita akan memanipulasi grid-column dan grid-row agar foto-foto tertentu (seperti hero image) bisa mendominasi tata letak, persis seperti majalah kelas atas.
1. Struktur HTML
Kita menggunakan class .masonry-container sebagai pembungkus utama, dengan class .item untuk setiap foto.

<div class="masonry-container">
  <div class="item hero">Foto Utama (Large)</div>
  <div class="item">Foto 2</div>
  <div class="item tall">Foto 3 (Vertical)</div>
  <div class="item">Foto 4</div>
  <div class="item wide">Foto 5 (Wide)</div>
  <div class="item">Foto 6</div>
</div>

2. CSS Grid Magis
Kunci dari layout editorial adalah penggunaan grid-auto-flow: dense yang akan mengisi celah kosong secara otomatis, serta menentukan ukuran span untuk elemen tertentu.

.masonry-container {
  display: grid;
  /* Membuat kolom fleksibel dengan lebar minimum 250px */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px; /* Tinggi baris tetap agar konsisten */
  grid-auto-flow: dense; /* Mengisi celah kosong dengan item yang lebih kecil */
  gap: 15px;
  padding: 20px;
}

/* Styling Item */
.item {
  background-color: #ddd;
  overflow: hidden;
  border-radius: 8px;
}

/* Layout Editorial: Span Kolom & Baris */
.hero {
  grid-column: span 2; /* Mengambil 2 kolom */
  grid-row: span 2;    /* Mengambil 2 baris */
}

.wide {
  grid-column: span 2; /* Foto lebar */
}

.tall {
  grid-row: span 2;    /* Foto tinggi (portrait) */
}

3. Mengapa Layout Ini Sangat Efektif?

• grid-auto-flow: dense: Fitur ini adalah rahasia "Masonry". Jika ada ruang kosong yang tersisa di baris tertentu, grid akan otomatis menarik elemen kecil di urutan bawah untuk mengisi ruang tersebut, sehingga tidak ada white space yang sia-sia.
• Responsive secara Alami: Dengan repeat(auto-fit, minmax(250px, 1fr)), galeri akan otomatis berpindah dari 4 kolom menjadi 1 kolom (di mobile) tanpa perlu media query yang rumit.
• Look & Feel Editorial: Dengan memberikan span pada elemen tertentu, Anda bisa menonjolkan foto-foto terbaik (seperti foto landscape yang luas atau foto portrait yang detail) persis seperti halaman majalah Vogue atau Architectural Digest.

4. Tips Tambahan untuk Desain Editorial

1. Aspect Ratio: Gunakan properti object-fit: cover; pada tag di dalam item agar foto tidak terdistorsi saat masuk ke dalam container dengan berbagai ukuran.
2. Typography: Untuk kesan editorial yang kuat, tempatkan teks judul di atas .hero menggunakan position: absolute;.
3. Hover Effect: Tambahkan sedikit transisi transform: scale(1.05); saat hover untuk memberikan kesan interaktif yang elegan.