Wie würdet ihr dieses Grid aufbauen?

[Tabula_Rasa]

Hallo zusammen,

ich habe eine Frage bezüglich meines Vorhaben. Ich möchte ein Grid-Layout, in dem ich pro Reihe Bilder habe mit fixer Breite (33.3% der Reihe) und einer Höhe, die sich automatisch an der Breite anpasst (außer die Höhe des Bildes ist zu hoch, also bei Bildern mit einer Höhe von über 500px). Ich denke, ich könnte ein Grid-Layout definieren, aber weil es das erste Mal für mich wäre, wollte ich euch fragen, wie ihr an die Aufgabe rangehen würdet, damit ich eine Referenz habe.

Ich danke euch vielmals!

 

[Gelöschtes Mitglied 36401]

Siehe https://www.w3schools.com/css/css_image_gallery.asp

 

[Tabula_Rasa]

Ich schau mir das mal an, danke! Sieht ziemlich nett aus. Ich hätte es fast mit display: grid gemacht, was unnötig kompliziert wäre für mein Vorhaben

 

[Tabula_Rasa]

Hier ist w3schools nicht auf der Höhe der Zeit:
Es wird mit float-Layout gearbeitet
und
es wird kein Gebrauch vom figure-Tag gemacht obwohl dies ein klassischer Anwendungsfall dafür ist.
Nicht zur Nachahmung empfohlen

Wie würdest du es machen?

 

[MrMurphy]

Ich hätte es fast mit display: grid gemacht, was unnötig kompliziert wäre für mein Vorhaben

Umgekehrt, Grid ist die einfachste Möglichkeit. Um drei Bilder mit Abständen nebeneinander zu stellen reichen für den umgebenden Container 3 Zeilen CSS aus. Ganz ohne Rechnen, es reicht die Anzahl der gewünschten Spalten (im Beispiel 3) anzugeben. padding und margin sind nicht erforderlich, können aber natürlich trotzdem zusätzlich verwendet werden:

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;

Mit auto-fit kann die Anordnung der Bilder ohne Media-Queries responsive gemacht werden, es bleibt bei den drei Zeilen CSS:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;

 

[Tabula_Rasa]

Vielen Dank für die ausführlichen Antworten!