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

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

<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;
/* 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.