Responsive CSS-Grid-Galerie

Durch die Kombination von display: grid und grid-template-columns: repeat(auto-fit, minmax(..., 1fr)) lässt sich eine responsive Bildergalerie erstellen, bei der sich die Anzahl der Spalten automatisch an die Bildschirmbreite anpasst – völlig ohne den Einsatz von Media Queries (@media).

Vorschau

Anwendungsfälle und Eigenschaften

• Portfolios und Fotogalerien: Ideal, um Bilder nahtlos und ansprechend zu präsentieren.
• Produktlisten in Online-Shops: Eignet sich hervorragend für Layouts mit Produktkarten.
• Keine Media Queries erforderlich: Da auto-fit und minmax zum Einsatz kommen, bleibt der Code minimalistisch und leicht wartbar.

Design- und UX-Prinzipien

• Festes Seitenverhältnis: Durch die Kombination von aspect-ratio: 1 / 1 und object-fit: cover wird ein konsistentes, ästhetisches Raster mit quadratischen Bildern beibehalten – selbst wenn die Originalbilder unterschiedliche Proportionen aufweisen.
• Hover-Effekte: Sobald der Mauszeiger über ein Bild bewegt wird, hebt es sich leicht an (transform: translateY und scale) und der Schatten intensiviert sich. Dies signalisiert den Nutzern intuitiv, dass das Element interaktiv ist.
• Flüssige Übergänge: Für eine besonders natürliche und geschmeidige Animation wird die Timing-Funktion cubic-bezier verwendet.

Anpassungsmöglichkeiten

• Mindestbreite ändern: Durch Anpassung des Wertes 200px in minmax(200px, 1fr) können Sie die Minimalgröße eines einzelnen Elements steuern. Ein höherer Wert reduziert die maximale Anzahl von Spalten pro Zeile.
• Seitenverhältnis anpassen: Durch eine Änderung auf 16 / 9 (Querformat) oder 3 / 4 (Hochformat) lässt sich das Layout optimal an Ihre spezifischen Anforderungen anpassen.

Code

<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;
/* Passt die Anzahl der Spalten automatisch an, um den Container zu füllen, ohne 200px zu unterschreiten */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Behält immer ein quadratisches Format bei */
aspect-ratio: 1 / 1;
/* Beschneidet das Bild, um das Seitenverhältnis beizubehalten */
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 {
/* Leichter Schwebe-Effekt beim Hovern */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Browser-Unterstützung

• display: grid und aspect-ratio werden von allen modernen Browsern (Chrome, Firefox, Safari, Edge) vollständig unterstützt.
• Veraltete Browser (wie z. B. IE11) werden nicht mehr unterstützt. Falls erforderlich, sollten entsprechende Fallbacks implementiert werden.