gallery masonry portfolio images pinterest gallery masonry pinterest columns portfolio photos masonry image gallery pinterest-style portfolio grid
Gallery Masonry
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/masonry.json masonry.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-gallery-text)]">Portfolio</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Selected projects</h2>
</div>
<div class="mt-12 columns-1 gap-4 space-y-4 sm:columns-2 lg:columns-3">
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[4/5] bg-gradient-to-br from-indigo-200 to-purple-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[4/3] bg-gradient-to-br from-emerald-200 to-teal-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-square bg-gradient-to-br from-amber-200 to-orange-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[3/4] bg-gradient-to-br from-rose-200 to-pink-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[4/3] bg-gradient-to-br from-sky-200 to-cyan-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[3/5] bg-gradient-to-br from-violet-200 to-fuchsia-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-square bg-gradient-to-br from-lime-200 to-green-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[4/3] bg-gradient-to-br from-slate-200 to-zinc-300 transition duration-300 group-hover:scale-105"></div>
</a>
<a href="#" class="group block overflow-hidden rounded-xl">
<div class="aspect-[3/4] bg-gradient-to-br from-orange-200 to-red-300 transition duration-300 group-hover:scale-105"></div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
gallerymasonryportfolioimagespinterest
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| items | Yes | Gallery images with varying aspect ratios. |
Masonry gallery using CSS columns. Mixed aspect ratios create a natural, organic layout. Hover zoom effect on each item. Responsive: 3 → 2 → 1 columns. No JavaScript needed.