Galeri Grid CSS Responsif

Dengan mengkombinasikan display: grid dan grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), Anda dapat membuat galeri gambar responsif yang mana jumlah kolom akan menyesuaikan secara otomatis mengikuti lebar layar. Metode ini sama sekali tidak memerlukan penulisan media query (@media).

Pratinjau (Preview)

Kasus Penggunaan & Fitur

• Portofolio dan Galeri Foto: Sangat ideal saat Anda ingin memamerkan sekumpulan gambar dengan format besar dan menawan.
• Katalog Produk E-commerce: Cocok diimplementasikan pada tata letak susunan kartu produk.
• Tanpa Media Query: Berkat penggunaan auto-fit dan minmax, baris kode menjadi jauh lebih ringkas, sehingga memudahkan proses pemeliharaan (maintenance).

Pertimbangan Desain & UX

• Rasio Aspek yang Konsisten: Dengan memadukan aspect-ratio: 1 / 1 dan object-fit: cover, tata letak grid akan selalu seragam dan estetis, terlepas dari dimensi asli masing-masing gambar.
• Efek Hover: Penambahan animasi melayang yang halus (transform: translateY dan scale) serta penebalan bayangan saat kursor diarahkan, akan secara intuitif menginformasikan pengguna bahwa elemen tersebut bersifat interaktif.
• Transisi yang Mulus: Penggunaan kurva cubic-bezier menghasilkan pergerakan animasi yang terasa alami dan mengalir halus.

Panduan Kustomisasi

• Mengubah Lebar Minimum: Anda dapat menetapkan ukuran terkecil tiap item dengan mengubah nilai 200px pada bagian minmax(200px, 1fr). Semakin besar nilai yang dimasukkan, semakin sedikit jumlah maksimum item yang dapat berjajar secara horizontal.
• Mengubah Rasio Aspek: Rasio bisa diubah menjadi 16 / 9 (lanskap) atau 3 / 4 (potret), menyesuaikan tata letak dengan konteks penggunaan Anda.

Kode Implementasi

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

.gallery {
display: grid;
/* Menyesuaikan jumlah kolom secara otomatis untuk memenuhi kontainer dengan batas minimal 200px */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Selalu mempertahankan bentuk persegi */
aspect-ratio: 1 / 1;
/* Memotong gambar agar rasio tidak rusak */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Efek sedikit melayang saat di-hover */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Dukungan Browser

• display: grid beserta aspect-ratio telah didukung penuh oleh semua peramban (browser) modern, seperti Chrome, Firefox, Safari, dan Edge.
• Fitur-fitur ini tidak didukung pada peramban lawas (misalnya IE11). Oleh karena itu, pertimbangkan untuk menyiapkan fallback apabila target audiens Anda masih menggunakannya.