Wie würdet ihr dieses Grid aufbauen?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
242
2
18
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!
 

Tabula_Rasa

Mitglied
12 Mai 2017
242
2
18
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
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 :D
 
  • Like
Reaktionen: Tabula_Rasa

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.095
406
83
67
Ich denke, Gridlayout wäre schon der richtige Ansatz. Mit den template-columns kannst Du die Verteilung ohne Rechnerei mit 33.333% problemlos einrichten.
 
  • Like
Reaktionen: Tabula_Rasa

MrMurphy

Senior HTML'ler
28 Juli 2009
1.566
232
63
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:

Code:
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:

Code:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Tabula_Rasa
Werbung:

Neueste Beiträge