Masonry

CSS-only masonry grid layout with column variants, gap sizes, overlays, and staggered load animation.

Basic Masonry Grid

Preview

<div class="masonry masonry-cols-3">
  <div class="masonry-grid">
    <div class="masonry-item" style="height: 200px; background: var(--color-primary); opacity: 0.15;"></div>
    <div class="masonry-item" style="height: 140px; background: var(--color-success); opacity: 0.15;"></div>
    <div class="masonry-item" style="height: 260px; background: var(--color-warning); opacity: 0.15;"></div>
    <div class="masonry-item" style="height: 180px; background: var(--color-error); opacity: 0.15;"></div>
    <div class="masonry-item" style="height: 220px; background: var(--color-info); opacity: 0.15;"></div>
    <div class="masonry-item" style="height: 160px; background: var(--color-accent); opacity: 0.15;"></div>
  </div>
</div>

Requires: ux.min.css

<div style="column-count: 3; column-gap: 1rem;">
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 200px; background: var(--color-primary); opacity: 0.15;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 140px; background: var(--color-success); opacity: 0.15;"></div>
  <!-- ... more items ... -->
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS column-count masonry

Column Variants

Preview

<!-- 2 columns -->
<div class="masonry masonry-cols-2 mb-4">
  <div class="masonry-grid">
    <div class="masonry-item" style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 160px; background: var(--color-success); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 140px; background: var(--color-error); opacity: 0.1;"></div>
  </div>
</div>

<!-- 4 columns -->
<div class="masonry masonry-cols-4">
  <div class="masonry-grid">
    <div class="masonry-item" style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 80px; background: var(--color-success); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 160px; background: var(--color-warning); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 100px; background: var(--color-error); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 130px; background: var(--color-info); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 90px; background: var(--color-accent); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 110px; background: var(--color-primary); opacity: 0.1;"></div>
    <div class="masonry-item" style="height: 140px; background: var(--color-success); opacity: 0.1;"></div>
  </div>
</div>

Requires: ux.min.css

<!-- 2 columns -->
<div class="mb-4" style="column-count: 2; column-gap: 1rem;">
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 160px; background: var(--color-success); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 140px; background: var(--color-error); opacity: 0.1;"></div>
</div>

<!-- 4 columns -->
<div style="column-count: 4; column-gap: 1rem;">
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 80px; background: var(--color-success); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 160px; background: var(--color-warning); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 100px; background: var(--color-error); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 130px; background: var(--color-info); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 90px; background: var(--color-accent); opacity: 0.1;"></div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden" style="height: 110px; background: var(--color-primary); opacity: 0.1;"></div>
  <div class="break-inside-avoid rounded-box overflow-hidden" style="height: 140px; background: var(--color-success); opacity: 0.1;"></div>
</div>

Requires: tw.min.css

// No JavaScript required

With Card Content

Preview

Mountain Lake

Beautiful scenery at sunset

Forest Path

A winding trail through the trees

City Night

Urban lights at midnight

<div class="masonry masonry-cols-3">
  <div class="masonry-grid">
    <div class="masonry-item" style="border: 1px solid var(--color-base-300);">
      <div style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
      <div class="masonry-item-content">
        <div class="masonry-item-title">Mountain Lake</div>
        <div class="masonry-item-subtitle">Beautiful scenery at sunset</div>
      </div>
    </div>
    <div class="masonry-item" style="border: 1px solid var(--color-base-300);">
      <div style="height: 180px; background: var(--color-success); opacity: 0.1;"></div>
      <div class="masonry-item-content">
        <div class="masonry-item-title">Forest Path</div>
        <div class="masonry-item-subtitle">A winding trail through the trees</div>
      </div>
    </div>
    <div class="masonry-item" style="border: 1px solid var(--color-base-300);">
      <div style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
      <div class="masonry-item-content">
        <div class="masonry-item-title">City Night</div>
        <div class="masonry-item-subtitle">Urban lights at midnight</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="column-count: 3; column-gap: 1rem;">
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden bg-base-100 border border-base-300">
    <div style="height: 120px; background: var(--color-primary); opacity: 0.1;"></div>
    <div class="p-4">
      <div class="text-lg font-semibold mb-2">Mountain Lake</div>
      <div class="text-sm" style="color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">Beautiful scenery at sunset</div>
    </div>
  </div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden bg-base-100 border border-base-300">
    <div style="height: 180px; background: var(--color-success); opacity: 0.1;"></div>
    <div class="p-4">
      <div class="text-lg font-semibold mb-2">Forest Path</div>
      <div class="text-sm" style="color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">A winding trail through the trees</div>
    </div>
  </div>
  <div class="break-inside-avoid rounded-box overflow-hidden bg-base-100 border border-base-300">
    <div style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
    <div class="p-4">
      <div class="text-lg font-semibold mb-2">City Night</div>
      <div class="text-sm" style="color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">Urban lights at midnight</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Image Overlay on Hover

Preview

Overlay Title

Appears on hover

Second Item

Hover to reveal

Third Item

With smooth animation

<div class="masonry masonry-cols-3">
  <div class="masonry-grid">
    <div class="masonry-item masonry-item-hover" style="height: 200px; background: var(--color-primary); opacity: 0.3;">
      <div class="masonry-item-overlay">
        <div class="masonry-item-title">Overlay Title</div>
        <div class="masonry-item-subtitle">Appears on hover</div>
      </div>
    </div>
    <div class="masonry-item masonry-item-hover" style="height: 160px; background: var(--color-success); opacity: 0.3;">
      <div class="masonry-item-overlay">
        <div class="masonry-item-title">Second Item</div>
        <div class="masonry-item-subtitle">Hover to reveal</div>
      </div>
    </div>
    <div class="masonry-item masonry-item-hover" style="height: 240px; background: var(--color-warning); opacity: 0.3;">
      <div class="masonry-item-overlay">
        <div class="masonry-item-title">Third Item</div>
        <div class="masonry-item-subtitle">With smooth animation</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="column-count: 3; column-gap: 1rem;">
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden relative group" style="height: 200px; background: var(--color-primary); opacity: 0.3;">
    <div class="absolute inset-0 flex flex-col items-center justify-center text-center text-white p-4 bg-black/0 group-hover:bg-black/40 transition-colors">
      <div class="text-lg font-semibold mb-1 opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200">Overlay Title</div>
      <div class="text-sm opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 delay-50">Appears on hover</div>
    </div>
  </div>
  <div class="break-inside-avoid mb-4 rounded-box overflow-hidden relative group" style="height: 160px; background: var(--color-success); opacity: 0.3;">
    <div class="absolute inset-0 flex flex-col items-center justify-center text-center text-white p-4 bg-black/0 group-hover:bg-black/40 transition-colors">
      <div class="text-lg font-semibold mb-1 opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200">Second Item</div>
      <div class="text-sm opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 delay-50">Hover to reveal</div>
    </div>
  </div>
  <div class="break-inside-avoid rounded-box overflow-hidden relative group" style="height: 240px; background: var(--color-warning); opacity: 0.3;">
    <div class="absolute inset-0 flex flex-col items-center justify-center text-center text-white p-4 bg-black/0 group-hover:bg-black/40 transition-colors">
      <div class="text-lg font-semibold mb-1 opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200">Third Item</div>
      <div class="text-sm opacity-0 translate-y-2.5 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 delay-50">With smooth animation</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — CSS :hover transitions handle overlay reveal

Gap Variants

Preview

No gap

Large gap

<div class="flex flex-col gap-6">
  <!-- No gap -->
  <div>
    <p class="text-sm font-medium mb-2">No gap</p>
    <div class="masonry masonry-cols-4 masonry-gap-none">
      <div class="masonry-grid">
        <div class="masonry-item" style="height: 80px; background: var(--color-primary); opacity: 0.1; border-radius: 0;"></div>
        <div class="masonry-item" style="height: 60px; background: var(--color-success); opacity: 0.1; border-radius: 0;"></div>
        <div class="masonry-item" style="height: 100px; background: var(--color-warning); opacity: 0.1; border-radius: 0;"></div>
        <div class="masonry-item" style="height: 70px; background: var(--color-error); opacity: 0.1; border-radius: 0;"></div>
      </div>
    </div>
  </div>

  <!-- Large gap -->
  <div>
    <p class="text-sm font-medium mb-2">Large gap</p>
    <div class="masonry masonry-cols-4 masonry-gap-lg">
      <div class="masonry-grid">
        <div class="masonry-item" style="height: 80px; background: var(--color-primary); opacity: 0.1;"></div>
        <div class="masonry-item" style="height: 60px; background: var(--color-success); opacity: 0.1;"></div>
        <div class="masonry-item" style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
        <div class="masonry-item" style="height: 70px; background: var(--color-error); opacity: 0.1;"></div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-6">
  <!-- No gap -->
  <div>
    <p class="text-sm font-medium mb-2">No gap</p>
    <div style="column-count: 4; column-gap: 0;">
      <div class="break-inside-avoid overflow-hidden" style="height: 80px; background: var(--color-primary); opacity: 0.1;"></div>
      <div class="break-inside-avoid overflow-hidden" style="height: 60px; background: var(--color-success); opacity: 0.1;"></div>
      <div class="break-inside-avoid overflow-hidden" style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
      <div class="break-inside-avoid overflow-hidden" style="height: 70px; background: var(--color-error); opacity: 0.1;"></div>
    </div>
  </div>

  <!-- Large gap -->
  <div>
    <p class="text-sm font-medium mb-2">Large gap</p>
    <div style="column-count: 4; column-gap: 1.5rem;">
      <div class="break-inside-avoid mb-6 rounded-box overflow-hidden" style="height: 80px; background: var(--color-primary); opacity: 0.1;"></div>
      <div class="break-inside-avoid mb-6 rounded-box overflow-hidden" style="height: 60px; background: var(--color-success); opacity: 0.1;"></div>
      <div class="break-inside-avoid mb-6 rounded-box overflow-hidden" style="height: 100px; background: var(--color-warning); opacity: 0.1;"></div>
      <div class="break-inside-avoid rounded-box overflow-hidden" style="height: 70px; background: var(--color-error); opacity: 0.1;"></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required