I can’t get a proper masonry layout working using Tailwind classes. Here’s how it looks: what i have
I want every card to have a variable height to fit its content, and then the following card right after it on the y-axis. I tried multiple approaches, including varying h-options for the cards. Nothing worked.
Enjoy my badly made illustration on how it’s supposed to look: what i want
Here’s the code, I’m only using Tailwind via their CDN and no other stylesheets:
<!-- Referenzen -->
<div class="anchor" id="referenzen"></div>
<div class="flex flex-col bg-white shadow-lg rounded-md p-6">
<div class="space-y-2 mb-6">
<h2 class="text-xl font-semibold">
Referenzen
</h2>
<p class="text-md text-slate-500">
In mittlerweile über 310 Projekten können wir auf eine ganze Menge Referenzen zurückblicken. Hier gibt es nur einen Einblick – sprechen Sie uns gerne an, wenn Sie konkrete Referenzen zu bestimmten Themenfeldern suchen.
</p>
</div>
<div class="flex flex-col gap-4 grid sm:flex-row sm:flex-wrap sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4">
<!-- Item 01 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-1.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Sanierung + Umbau
</p>
<h3 class="text-lg font-semibold">
Alte Bäckerei Stahnsdorf
</h3>
</div>
<p class="text-slate-500">
Sanierung und Umbau der „Alten Bäckerei“ in Stahnsdorf.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2014 - 2015</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Alte Bäckerei GbR</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 02 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-2.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Sanierung
</p>
<h3 class="text-lg font-semibold">
Bürgerhaus unter Denkmalschutz
</h3>
</div>
<p class="text-slate-500">
Sanierung des Bürgerhauses mit Wohnungen unter Bedingungen des Denkmalschutzes in Schenkenhorst inkl. Außenanlagen.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2005 - 2011</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 03 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-3.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Neubau
</p>
<h3 class="text-lg font-semibold">
Einfamilienhaus
</h3>
</div>
<p class="text-slate-500">
Neubau eines Einfamilienhauses in Schenkenhorst.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">1996 - 1997</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Privatperson</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 04 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-4.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Neubau
</p>
<h3 class="text-lg font-semibold">
Sanitär- und Wirtschaftstrakt
</h3>
</div>
<p class="text-slate-500">
Sanitär- und Wirtschaftstrakt im 1. Bauabschnitt für einen Sportverein.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2011 - 2012</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">RSV Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 05 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-5.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Bauleitung
</p>
<h3 class="text-lg font-semibold">
Sporthalle Teltow
</h3>
</div>
<p class="text-slate-500">
Bauleitung für den Neubau einer Sporthalle in Teltow.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2009 - 2010</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Stadt Teltow</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 06 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-6.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Bauleitung
</p>
<h3 class="text-lg font-semibold">
Sporthalle Kleinmachnow
</h3>
</div>
<p class="text-slate-500">
Bauleitung für den Neubau einer Sporthalle in Kleinmachnow.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2011</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Kleinmachnow</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 07 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-7.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Bauleitung
</p>
<h3 class="text-lg font-semibold">
Sporthalle Wolfenbüttel
</h3>
</div>
<p class="text-slate-500">
Bauleitung für den Neubau einer Sporthalle in Wolfenbüttel.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2012</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Landkreis Wolfenbüttel</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 08 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-8.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Planung + Bauleitung
</p>
<h3 class="text-lg font-semibold">
Dachsanierung John-Schehr-Sporthalle
</h3>
</div>
<p class="text-slate-500">
Planung und Bauleitung der Dachsanierung der John-Schehr-Sporthalle in Teltow.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2013</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Stadt Teltow</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 09 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-9.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Neubau
</p>
<h3 class="text-lg font-semibold">
Bühne mit Feuerwehrgarage
</h3>
</div>
<p class="text-slate-500">
Neubau einer Bühne mit Feuerwehrgarage in Großderschau.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2010</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Amt Rhinow</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 10 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-10.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Neubau
</p>
<h3 class="text-lg font-semibold">
Jugendeinrichtung
</h3>
</div>
<p class="text-slate-500">
Neubau einer Jugendeinrichtung inkl. Außenanlagen.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2009</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 11 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-11.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Umbau
</p>
<h3 class="text-lg font-semibold">
Dachgeschoss
</h3>
</div>
<p class="text-slate-500">
Umbau eines Dachgeschosses eines Mehrfamilienhauses.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2009</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 12 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-12.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Anbau
</p>
<h3 class="text-lg font-semibold">
Sanitätstrakt
</h3>
</div>
<p class="text-slate-500">
Anbau eines Sanitärtraktes am Feuerwehrgebäude.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2000</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 13 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-13.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Sanierung
</p>
<h3 class="text-lg font-semibold">
Feuerwehrgebäude
</h3>
</div>
<p class="text-slate-500">
Sanierung des Feuerwehrgebäudes unter Denkmalschutz (mehrere Bauabschnitte) in Stahnsdorf.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2003 - 2007</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 14 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-14.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Planung + Bauüberwachung
</p>
<h3 class="text-lg font-semibold">
5 Holzbrücken
</h3>
</div>
<p class="text-slate-500">
Ersatzmaßnahmen von 5 Holzbrücken im Wohngebiet Grashüpfersiedlung in Stahnsdorf.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2013</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 15 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-15.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Erneuerung
</p>
<h3 class="text-lg font-semibold">
Geh- und Radweg-Erneuerung
</h3>
</div>
<p class="text-slate-500">
Erneuerung von 660m Geh- und Radweg in Güterfelde, Westseite des Dammes in Stahnsdorf.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2014 - 2015</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Gemeinde Stahnsdorf</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 15 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-15.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Neubau
</p>
<h3 class="text-lg font-semibold">
Regenentwässerung
</h3>
</div>
<p class="text-slate-500">
Neubau der Regenentwässerung und der Gehwege in Teltow.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2009</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">Stadt Teltow</p>
</div>
</div>
</div>
<!-- Item Ende -->
<!-- Item 16 -->
<div class="bg-white shadow-md rounded-md overflow-hidden h-fit">
<img src="assets/bild-16.jpg">
<div class="p-3 space-y-1">
<div>
<p class="text-sm font-bold text-slate-600 uppercase">
Umverlegung
</p>
<h3 class="text-lg font-semibold">
Trinkwasserleitung
</h3>
</div>
<p class="text-slate-500">
Umverlegung der Trinkwasserleitung, DN 500 L40.
</p>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">calendar_today</span>
<p class="my-auto">2010</p>
</div>
<div class="flex flex-row my-auto text-slate-500">
<span class="material-symbols-rounded py-1 pr-2 my-auto">account_circle</span>
<p class="my-auto">WAZV „Der Teltow“</p>
</div>
</div>
</div>
<!-- Item Ende -->
</div>
</div>
The testing site is only at maltev.de/awe, if you need to look at the whole thing.
Any ideas on what I am missing? Thanks!
