Tailwind Masonry Layout: Pinterest-Grid ohne JavaScript-Bibliothek

1. Warum Masonry und wann es sinnvoll ist

Ein Masonry Layout ist ein Gitterlayout, bei dem Items unterschiedlicher Höhe ohne vertikale Lücken in Spalten angeordnet werden – die Items in jeder Spalte folgen direkt aufeinander, ohne durch das Grid auf eine gemeinsame Zeilenhöhe gezwungen zu werden. Das Ergebnis ist eine dichte, visuell effiziente Darstellung heterogener Inhalte, wie sie von Pinterest, Unsplash und zahlreichen Bild-Galerien bekannt ist. Der Vorteil gegenüber klassischen Grids: Es gibt keine weißen Flächen unter kleineren Karten, die neben größeren stehen.

Ein Tailwind Masonry Layout ist sinnvoll für Bild-Galerien mit unterschiedlichen Seitenverhältnissen, Blog-Karten-Grids mit variablen Texthöhen, Produkt-Grids in E-Commerce (besonders für Kleidung und Accessoires), Pinterest-ähnliche Content-Discovery-Seiten und Portfolio-Seiten mit gemischten Medienformaten. Ungeeignet ist Masonry hingegen für tabellarische Daten, wo horizontale Ausrichtung über Zeilen hinweg wichtig ist, und für Inhalte, bei denen die Reihenfolge der Items eine semantische Bedeutung hat, die durch Spalten-weises Lesen gestört wird.

2. CSS columns: Die native Masonry-Lösung

Die einfachste Art, ein Masonry Layout zu implementieren, ist die CSS-Eigenschaft columns. Diese Eigenschaft teilt einen Container in mehrere Spalten auf und verteilt die Kindelemente automatisch in die Spalten – so dass jede Spalte annähernd gleiche Höhe hat. Das ist kein echtes Masonry im technischen Sinne (Items werden von oben nach unten in jede Spalte gefüllt, nicht nach Höhe sortiert), aber das Ergebnis sieht identisch aus und hat denselben visuellen Effekt.

Der entscheidende Vorteil von CSS columns für ein Tailwind Masonry Layout: Es funktioniert ohne JavaScript, ohne externe Bibliotheken und ohne Build-Schritte. Die Browser-Unterstützung ist vollständig (alle Browser seit 2011). Der einzige technische Nachteil: Items werden spaltenweise sortiert (erst alle Items in Spalte 1, dann Spalte 2, usw.), nicht zeilenweise (alle Items der ersten Zeile, dann der zweiten). Für Bild-Galerien, wo die visuelle Anordnung wichtiger ist als die semantische Reihenfolge, ist das kein Problem. Für durchnummerierte Listen oder chronologisch geordnete Blog-Posts kann es unerwünscht sein.

<!-- CSS columns Masonry with Tailwind — no JavaScript required -->
<div class="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 p-4">

  <!-- Each card uses break-inside-avoid to prevent column breaks mid-card -->
  <div class="break-inside-avoid mb-4 rounded-2xl overflow-hidden bg-white
              shadow-sm border border-slate-200">
    <img src="/img/photo-1.jpg" alt="Bild 1"
         class="w-full h-auto object-cover"
         loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold text-slate-800 text-sm">Bildtitel 1</h3>
      <p class="text-slate-500 text-xs mt-1">Kurze Beschreibung des Bildinhalts</p>
    </div>
  </div>

  <div class="break-inside-avoid mb-4 rounded-2xl overflow-hidden bg-white
              shadow-sm border border-slate-200">
    <!-- Taller card — Masonry fills the gap naturally -->
    <img src="/img/photo-2.jpg" alt="Bild 2"
         class="w-full h-auto object-cover"
         loading="lazy">
    <div class="p-4">
      <h3 class="font-semibold text-slate-800 text-sm">Bildtitel 2</h3>
      <p class="text-slate-500 text-xs mt-1">
        Etwas längerer Beschreibungstext, der die Karte höher macht und so den
        Masonry-Effekt demonstriert.
      </p>
      <div class="mt-3 flex gap-2">
        <span class="px-2 py-0.5 bg-sky-100 text-sky-700 text-xs rounded-full">Tag 1</span>
        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded-full">Tag 2</span>
      </div>
    </div>
  </div>

  <!-- More cards follow — columns distributes them automatically -->
</div>

3. CSS columns mit Tailwind-Klassen

Tailwind CSS bietet für das Masonry Layout via CSS columns mehrere direkte Utility-Klassen. Die columns-{n}-Klassen setzen eine feste Spaltenanzahl: columns-2 für zwei Spalten, columns-3 für drei. Die columns-{size}-Klassen setzen eine Mindestspaltenbreite: columns-sm (8rem), columns-md (16rem), columns-lg (24rem). Mit der Breiten-Variante passt der Browser die Spaltenanzahl automatisch an den verfügbaren Platz an – ähnlich wie auto-fill in CSS Grid.

Die wichtigste Tailwind-Klasse für Masonry Layouts mit CSS columns ist break-inside-avoid. Sie setzt break-inside: avoid auf jedes Kindelement und verhindert, dass der Browser ein Element mitten in der Mitte zwischen zwei Spalten umbricht – was ohne diese Klasse bei Karten mit Rahmen, Hintergrund oder Schatten zu sichtbaren Schnitt-Artefakten führt. break-inside-avoid ist das einzige technische Pflicht-Detail beim CSS-columns-Masonry-Ansatz; alles andere ist Layout und Styling.

4. Gap, Breakpoints und responsive Spaltenanzahl

Das Gap zwischen Spalten und das Gap zwischen Items gehören zu den wichtigsten Gestaltungsparametern eines Tailwind Masonry Layouts. Bei CSS columns gibt es einen technischen Unterschied: Die gap-*-Klasse setzt nur den horizontalen Abstand zwischen Spalten (column-gap), nicht den vertikalen Abstand zwischen Items. Der vertikale Abstand wird als Margin am Kindelement gesetzt: mb-4 am Ende jeder Karte sorgt für den vertikalen Abstand zur nächsten Karte in derselben Spalte.

Die responsive Spaltenanzahl ist das Kernstück eines guten Masonry Layouts mit Tailwind. Das Standardmuster: columns-1 sm:columns-2 lg:columns-3 xl:columns-4 passt die Spaltenanzahl stufenweise an die Bildschirmbreite an. Für sehr große Screens und breite Karten kann 2xl:columns-5 sinnvoll sein. Alternativ: Die columns-xs- bis columns-3xl-Klassen mit Mindestspaltenbreite lassen den Browser die Anzahl automatisch bestimmen – das verhält sich ähnlich wie responsive Container mit auto-fill und ist für Galerien mit vielen variablen Inhalten oft die bessere Wahl.