Masonry-Galerie in CSS (Pinterest-Stil)
Füge die Adressen der Fotos ein (eins pro Zeile) oder nutze die Beispiele. Die Vorschau zeigt das Ineinandergreifen sofort.
So geht’sFotos unterschiedlicher Höhe, ohne Lücken
Verfügbar auf: 
Masonry-Galerie in CSS (Pinterest-Stil): wofür es gut ist
Das Masonry-Layout fügt Fotos unterschiedlicher Höhe ohne Lücken in Spalten ein, wie bei Pinterest. Füge die Adressen der Fotos ein und wähle die Spalten am Handy, am Tablet und am Computer, den Abstand, die Ecken und die Beschriftung über dem Foto.
Der Code nutzt CSS columns, das in allen Browsern funktioniert, und fügt das native CSS-Masonry (display: grid-lanes, im März 2026 in Safari 26.4 erschienen und in Chrome und Firefox noch ohne stabile Unterstützung) innerhalb eines @supports hinzu, wie es Progressive Enhancement empfiehlt. Die Seite erklärt den Unterschied in der Reihenfolge der beiden Techniken.
So geht’s
- Füge die Adressen der Fotos ein.
- Passe Spalten, Abstand und Ecken an.
- Kopiere den Code.
Wann nutzen
- Portfolio von Fotografen.
- Arbeitsgalerie eines Salons oder Studios.
- Inspirationswand.
Häufige Fragen
Was ist ein Masonry-Layout?
Es ist das Raster, in dem die Elemente dieselbe Breite, aber unterschiedliche Höhen haben und jedes direkt unter dem vorherigen in der Spalte einrastet, ohne leere Stellen zu lassen. Bekannt durch Pinterest und passend für gemischte Hoch- und Querformatfotos.
Brauche ich JavaScript?
Nein. Der Code nutzt CSS columns, das in allen Browsern funktioniert. Wo es das native CSS-Masonry schon gibt (display: grid-lanes, im März 2026 in Safari 26.4 erschienen), aktiviert ein @supports die neue Version, die die Reihenfolge der Fotos von links nach rechts beibehält.
Warum ändert sich die Reihenfolge der Fotos bei CSS columns?
Bei columns laufen die Fotos zuerst die erste Spalte hinunter und gehen erst dann in die zweite, wie in einer Zeitung. Ist die Reihenfolge wichtig (zum Beispiel die neuesten zuerst), setze die wichtigsten an den Anfang der Liste und nutze wenige Spalten, oder warte, bis grid-lanes in den anderen Browsern ankommt.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.