Bilder in der Artikelbeschreibung

Hallo Ihr Lieben,

sitze nach längerer Zeit mal wieder am Design. Ich möchte in einer Artikelbeschreibung 15 Bilder als Beispiel einfügen. Jedes Bild ist 200x200px groß. Gern würde ich jeweils 5 auf eine Zeile und das in 3 Zeilen darstellen.

Würdet ihr das mit einer Tabelle lösen? Weil auf dem Handy soll das ja auch noch vernünftig dargestellt werden.

Habe jetzt alle Bilder eingefügt, alle responsiv. Am PC sieht es hübsch aus, aber auf dem Handy wird jedes Bild mittig untereinander dargestellt. Zwar verkleinert aber eben pro Zeile eins.

Über Tipps und Hilfen bin ich wie immer sehr dankbar

 

Tabellen würde ich nicht machen, das gibt ein Chaos auf den dutzenden Endgeräten und Auflösungen.

Vielleicht mit CSS und Display Flex.

Beispiel:

Code:

<div class="gallery">
    <img src="bild1.jpg" alt="Bild 1">
    <img src="bild2.jpg" alt="Bild 2">
  <img src="bild3.jpg" alt="Bild 3">
  <img src="bild4.jpg" alt="Bild 4">
  <img src="bild5.jpg" alt="Bild 5">
  <img src="bild6.jpg" alt="Bild 6">
<!-- hier weitere Bilder -->
</div>

Code:

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

.gallery img {
    width: 200px;
    height: 200px;
    margin: 7.5px;
    object-fit: cover;
}

@media (max-width: 1200px) {
    .gallery img {
        width: 150px;
        height: 150px;
    }
}

 

Herzlichen Dank, probiere ich sofort aus

 

Am PC sieht es schön aus, jetzt sind es jeweils 4 nebeneinander. In der mobilen Ansicht weiterhin untereinander, aber jetzt linksbündig. Da sah das mittig besser aus. Kannst du mir verraten, wie ich das wieder mittig hinbekomme? Ganz lieben Dank für deine Unterstützung

 

Habs hinbekommen, bei 140 sind sie auf dem Handy nebeneinander. Daaaankeschön

 

Hmm, versuch mal die height der Bilder auf auto zu setzen und setz bei dem Mobile Code mit weniger Pixeln. Kann sein das es noch zu gross ist und daher direkt untereinander angezeigt wird.

Edit: Ah okay jetzt erst deinen Reply gesehen, perfekt