Vier Galeriebilder in einer schmalen Spalte darstellen
Die Breite einer Galerie wird häufig von mehreren ineinander verschachtelten Elementen bestimmt.
Das Problem
Eine Galerie soll vier Bilder nebeneinander zeigen, obwohl sie nur einen Teil der Seitenbreite einnimmt. Eine Änderung der äußeren Zeile verändert nicht automatisch die innere Aufteilung des Galeriemoduls. Dazu kommen Abstände und mögliche Mindestbreiten der Bilder.
Das Vorgehen
Die wirksame Breite messen
Zuerst wird die tatsächliche Breite des Galeriecontainers betrachtet. Davon gehen Innenabstände und Spaltenabstände ab. Vier gewünschte Spalten sind nur sinnvoll, wenn anschließend noch ausreichend breite Bilder übrig bleiben.
Das richtige Element ansprechen
Die Anpassung erhält eine eigene Klasse am betreffenden Modul oder Container. Dadurch wird die konkrete Galerie verändert, ohne andere Galerien der Website unbeabsichtigt mitzunehmen.
Kleine Ansichten gesondert behandeln
Eine Desktopaufteilung darf nicht ungeprüft auf Smartphones übernommen werden. Mit weniger Spalten bleibt die Darstellung lesbar. Die endgültigen Werte werden an den vorhandenen Bildern und tatsächlichen Containerbreiten geprüft.
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.galerie img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }Die Lösung
Eine explizite innere Spaltenaufteilung löst die Aufgabe verlässlicher als eine alleinige Änderung der äußeren Zeilenbreite. Ein einfaches CSS-Grid zeigt das Prinzip; vorhandene Modulregeln können zusätzliche Anpassungen verlangen.
Die nötige Breite vorab berechnen
Bei vier Spalten und 12 Pixel Abstand werden drei Zwischenräume benötigt. Von einem 500 Pixel breiten Container bleiben damit 464 Pixel für die Bilder, also 116 Pixel je Bild. Soll ein Bild mindestens 160 Pixel breit sein, ist diese Aufteilung im vorhandenen Container zu eng.
Prüfen Sie deshalb die Containerbreite und nicht nur die Bildschirmbreite. Liegt die Galerie in einer schmalen Seitenspalte, kann auch auf einem großen Bildschirm eine kleinere Spaltenzahl erforderlich sein. Die endgültige Einstellung folgt der nutzbaren Bildgröße.
Webentwicklung und Überarbeitung bestehender Seiten →
Haben Sie eine ähnliche Aufgabe?
Sie können mir die Ausgangslage per E-Mail beschreiben oder mich anrufen.