Responsive Bildergalerie mit CSS flexbox oder grid-layout

Question

Ich arbeite an einem Image-Gallery-Widget, wo der Benutzer eine Thumbnail-Breite, Thumbnail-Höhe und Rand (zwischen Thumbnails) einstellen kann und das Widget alle Thumbnails anzeigen wird ein schönes Gitter, bei dem jedes Bild die gleiche Breite und Höhe hat.

Ich frage mich, ob css-flexbox oder css-grid das möglich macht, ohne Zeilen und Spalten im Code zu definieren und ohne Breakpoints/Media-Abfragen.

Thumbnail-Bilder werden in einem Anker gewickelt, so dass eine Galerie Artikel (oder Raster-Element) wird wie folgt aussehen:

<a href="#" class="gallery-item"> 
    <img src="myimage" width="300" height="200" /> 
</a> 

Die Galerie Artikel des div-Container vollständig füllen sollten, was bedeutet, Es sollte keine Lücke zwischen dem letzten Thumbnail in einer Zeile und der rechten Kante des Container-Divs sein (außer wenn wir nicht genug Items haben, um die Zeile zu füllen, dh wenn 3 Items ft hintereinander stehen, aber wir nur 8 Items haben, dann die dritte Reihe hat nur 2 Gegenstände und eine Lücke nach rechts, die so breit wie ein Gegenstand ist).

Galerieelemente können nie breiter sein als die vom Benutzer eingestellte Miniaturbreite, da die Qualität der Miniaturbilder nicht beeinträchtigt werden soll. Angenommen, in diesem Beispiel wird eine Breite von 300 Pixeln angenommen. Der Abstand zwischen den Galerieelementen ist festgelegt und wird vom Benutzer festgelegt. Wenn es nicht genügend Elemente eine Zeile füllen links, links einfach ausrichten heißt etwa so:

Ich will keine Haltepunkte in CSS definieren noch eine html für Zeile/Spalte Konstrukte hinzufügen. Ich möchte, dass der Browser einfach so viele Galerieelemente nebeneinander platziert, wie sie in den Container passen. Wenn auf der rechten Seite eine Lücke ist (zB 3 Thumbnails * 300px Breite = 900px, aber Container ist 1000px breit), sollte der Browser die Grid-Items verkleinern, so dass ein weiterer Gallerie-Item hineinpasst und somit die Lücke beseitigt. Ich muss in der Lage sein, einen Rand um jeden Galerieartikel herum zu definieren.

Sie das gewünschte Ansprechverhalten sehen in diesem gif (wenn der Browser Breite zu ändern):

Was Sie in der gif sehen, ohne Flexbox getan wird, muss aber eine Tonne CSS, die ich war Ich hoffe, mit Flexbox zu vermeiden. Ich habe Flexbox schon etwas recherchiert, konnte mich aber noch nicht ganz damit abfinden.

Danke für irgendwelche Tipps!

Answer 1

Verwenden von flex Fähigkeiten sollten für Ihre Aufgabe ausreichen. Beachten Sie die teilweise Unterstützung in IE11: http://caniuse.com/#feat=flexbox.

diese Stile auf dem Behälter Setzen:

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: space-between; 
} 

Styles für Wrapper:

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 300px; 
    margin: 5px; 
} 

Styles für Bilder:

.gallery img { 
    height: 100%; 
    width: 100%; 
} 

Raum zwischen den Bildern einfach definiert margin verwenden werden können. Um das Bildverhältnis beizubehalten, können Sie zum Beispiel Links (<a>) als Wrapper für Bilder verwenden().

Um das Vergrößern von Bildern zu verhindern, können Sie außerdem die Attribute flex-grow, flex-basis und max-width auf die Anker anwenden. Es gab auch ein Problem mit dehnen Bilder in der letzten Reihe - hack für das ist n - 1 (wo n ist die Anzahl der Bilder) leere Gegenstände im Container zu setzen.

Einstellung width und height zu 100% auf den Bildern erzwingt sie automatisch wachsen bis zu der durch max-width Attribut definiert die Breite, während Seitenverhältnis beibehalten wird.

Bitte überprüfen Sie die Arbeitsbeispiel: FIDDLE

Answer 2

Wenn Sie neue CSS Grid Layout verwenden keine Verwendung von Medien Stützpunkte kümmern. Vergessen Sie nicht, es für die IE10 + Unterstützung voran zu setzen.

Grid:

.gallery { 
    display: grid; 
    grid-gap: 5px; 
} 

Responsive Bilder:

.gallery img { 
    width: 100%; 
} 

Medien Stützpunkte (Werte von Bootstrap genommen 4)

@media (max-width: 575.98px) { 
    .gallery { 
     grid-template-columns: repeat(1, 1fr); 
    } 
} 
@media (max-width: 768.98px) and (min-width: 576px) { 
    .gallery { 
     grid-template-columns: repeat(2, 1fr); 
    } 
} 
@media (max-width: 991.98px) and (min-width: 768px) { 
    .gallery { 
     grid-template-columns: repeat(3, 1fr); 
    } 
} 
@media (max-width: 1199.98px) and (min-width: 992px) { 
    .gallery { 
     grid-template-columns: repeat(4, 1fr); 
    } 
} 
@media (min-width: 1200px) { 
    .gallery { 
     grid-template-columns: repeat(5, 1fr); 
    } 
} 

jsFiddle