SnippetUI
← Back to snippets

Duyarlı (Responsive) CSS Grid Galerisi

Medya sorguları (media queries) kullanmadan auto-fit ve minmax ile uygulanan duyarlı bir görsel galeri yöntemi.

HTMLCSS

display: grid ve grid-template-columns: repeat(auto-fit, minmax(..., 1fr)) özelliklerini bir araya getirerek, herhangi bir medya sorgusu (@media) yazmanıza gerek kalmadan ekran genişliğine göre sütun sayısını otomatik olarak ayarlayan duyarlı (responsive) bir görsel galerisi oluşturabilirsiniz.

Önizleme

Gallery image 1Gallery image 2Gallery image 3Gallery image 4Gallery image 5Gallery image 6

Kullanım Alanları ve Özellikler

  • Portföy ve Fotoğraf Galerileri: Görsellerin yan yana, son derece düzenli bir şekilde sergilenmesi gereken durumlar için idealdir.
  • E-Ticaret Ürün Listeleri: Ürün kartlarının listelendiği sayfa düzenlerinde de rahatlıkla kullanılabilir.
  • Medya Sorgularına Gerek Yok: auto-fit ve minmax işlevleri sayesinde CSS kodu çok daha sade hale gelir ve sürdürülebilirlik (maintainability) ciddi ölçüde artar.

Tasarım ve UX İpuçları

  • Sabit En-Boy Oranı: aspect-ratio: 1 / 1 ve object-fit: cover özelliklerinin birleşimi, orijinal görsellerin boyutları birbirinden farklı olsa bile her zaman aynı hizada, kusursuz bir kare ızgara (grid) görünümünün korunmasını sağlar.
  • Vurgu (Hover) Efektleri: Görselin üzerine gelindiğinde gerçekleşen hafif yükselme animasyonu (transform: translateY ve scale) ve belirginleşen gölge efekti, kullanıcıya öğenin tıklanabilir/etkileşimli olduğunu sezgisel bir biçimde hissettirir.
  • Pürüzsüz Geçişler: cubic-bezier fonksiyonu tercih edilerek son derece doğal ve akıcı bir animasyon dinamiği elde edilmiştir.

Özelleştirme İpuçları

  • Minimum Genişliği Ayarlama: 200px ifadesindeki minmax(200px, 1fr) değerini değiştirerek, her bir öğenin alabileceği minimum boyutu belirleyebilirsiniz. Bu değeri artırdığınızda, yan yana dizilecek maksimum öğe sayısı doğal olarak azalacaktır.
  • En-Boy Oranını Değiştirme: İlgili değeri 16 / 9 (yatay dikdörtgen) veya 3 / 4 (dikey) olarak değiştirerek, tamamen projenizin ihtiyaçlarına hizmet eden farklı mizanpajlar oluşturabilirsiniz.

Uygulama Kodu

index.html 
<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>
styles.css 
.gallery {
display: grid;
/* 200px'in altına düşmeyecek şekilde sütun sayısını otomatik ayarlayarak içeriği doldurur */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Her zaman kare oranını korur */
aspect-ratio: 1 / 1;
/* Görüntü oranını bozmadan kırpar (trim) */
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 {
/* Vurgu (hover) durumunda hafifçe yukarı kalkma efekti */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Tarayıcı Desteği

  • display: grid ve aspect-ratio özellikleri günümüzdeki tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) tam destek görmektedir.
  • Internet Explorer 11 (IE11) gibi çok eski tarayıcılarda desteklenmediğinden, proje gereksinimlerinize bağlı olarak yedek (fallback) çözümler üretmeniz gerekebilir.