CSS Image Grid

[Goldi708]

Hey Leute,

wie erstelle ich ein Image Grid, dass die Bilder automatisch anpasst so das der Abstand Zwischen ihnen immer gleich ist, auch wenn die Bilder unterschiedliche Größen haben? Wie auf diesem Bild.



Danke im voraus!

 

[Tourgott]

Am einfachsten mit dem relativ neuen, nativen CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

Kommt natürlich darauf an, wie weit der Browsersupport bei dir zurückreichen muss.

 

[savuti]

10 sec google...: https://benjaminhorn.io/code/make-a-grid-of-images-similar-to-the-flickr-feed-page/

 

[Goldi708]

10 sec google...: https://benjaminhorn.io/code/make-a-grid-of-images-similar-to-the-flickr-feed-page/

Vorzugsweise ohne Javascript.

 

[savuti]

Man kann zwar auch mit css "Rechnen" aber das wird für dein Problem nicht reichen. Etwas einfacher als bei Flickr sollte es eventuell mit flexbox gehen. Aber wieso kein Javascript?

 

[Goldi708]

Aber wieso kein Javascript?

Weil ich noch 0 Erfahrung mit Javascript habe.

 

[Madman1209]

Hi,

das Layout, das du suchst, bezeichnet man als "Masonry". Wenn du also nach "css masonry gallery" suchst findest du einige sehr gut, rein in CSS erstellte Gallerien, die dieses Design haben, wie dieses hier z.B.

VG,
Mad