Image Gallery

Image grid with column variants, aspect ratios, masonry layout, featured layout, hover effects, and lightbox integration.

Basic Grid (3 Columns)

Preview

<div class="gallery gallery-cols-3">
  <div class="gallery-grid">
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=40" alt="Photo 1" />
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=41" alt="Photo 2" />
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=42" alt="Photo 3" />
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=43" alt="Photo 4" />
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=44" alt="Photo 5" />
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=45" alt="Photo 6" />
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-2">
  <div class="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=40" alt="Photo 1" class="size-full object-cover hover:scale-105 transition-transform" />
  </div>
  <div class="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=41" alt="Photo 2" class="size-full object-cover hover:scale-105 transition-transform" />
  </div>
  <div class="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=42" alt="Photo 3" class="size-full object-cover hover:scale-105 transition-transform" />
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS grid with hover effects

Column Variants

Preview

<!-- 2 columns -->
<div class="gallery gallery-cols-2 mb-4">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=50" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=51" alt="" /></div>
  </div>
</div>

<!-- 4 columns -->
<div class="gallery gallery-cols-4">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=52" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=53" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=54" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=55" alt="" /></div>
  </div>
</div>

Requires: ux.min.css

<!-- 2 cols: grid-cols-2, 4 cols: grid-cols-4, 5 cols: grid-cols-5 -->
<div class="grid grid-cols-4 gap-2">
  <div class="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=52" alt="" class="size-full object-cover" />
  </div>
  <!-- ... more items ... -->
</div>

Requires: tw.min.css

// No JavaScript required — column count via CSS classes

Aspect Ratios

Preview

<div class="flex flex-col gap-4">
  <!-- Landscape 4:3 -->
  <div class="gallery gallery-cols-3 gallery-landscape">
    <div class="gallery-grid">
      <div class="gallery-item"><img src="https://picsum.photos/400/300?random=60" alt="" /></div>
      <div class="gallery-item"><img src="https://picsum.photos/400/300?random=61" alt="" /></div>
      <div class="gallery-item"><img src="https://picsum.photos/400/300?random=62" alt="" /></div>
    </div>
  </div>

  <!-- Wide 16:9 -->
  <div class="gallery gallery-cols-3 gallery-wide">
    <div class="gallery-grid">
      <div class="gallery-item"><img src="https://picsum.photos/400/225?random=63" alt="" /></div>
      <div class="gallery-item"><img src="https://picsum.photos/400/225?random=64" alt="" /></div>
      <div class="gallery-item"><img src="https://picsum.photos/400/225?random=65" alt="" /></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Aspect ratios: aspect-square (1:1), aspect-[4/3] (landscape),
     aspect-[3/4] (portrait), aspect-video (16:9) -->

Requires: tw.min.css

// No JavaScript required — aspect ratio set via CSS class

Masonry Layout

Preview

<div class="gallery gallery-masonry gallery-cols-3">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/400/500?random=70" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/300?random=71" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=72" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/350?random=73" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/450?random=74" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/300?random=75" alt="" /></div>
  </div>
</div>

Requires: ux.min.css

<div style="column-count: 3; column-gap: 0.5rem;">
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/500?random=70" alt="" class="w-full object-cover" />
  </div>
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/300?random=71" alt="" class="w-full object-cover" />
  </div>
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/400?random=72" alt="" class="w-full object-cover" />
  </div>
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/350?random=73" alt="" class="w-full object-cover" />
  </div>
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/450?random=74" alt="" class="w-full object-cover" />
  </div>
  <div class="break-inside-avoid mb-2 overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/300?random=75" alt="" class="w-full object-cover" />
  </div>
</div>

Requires: tw.min.css

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

Featured Layout

Preview

<div class="gallery gallery-featured">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/800/600?random=80" alt="Featured" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/300?random=81" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/300?random=82" alt="" /></div>
  </div>
</div>

Requires: ux.min.css

<!-- Featured: grid with 2fr 1fr columns, first item spans 2 rows -->
<div class="grid gap-2" style="grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr);">
  <div class="relative overflow-hidden rounded-lg cursor-pointer row-span-2">
    <img src="https://picsum.photos/800/600?random=80" alt="Featured" class="size-full object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/300?random=81" alt="" class="size-full object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-lg cursor-pointer">
    <img src="https://picsum.photos/400/300?random=82" alt="" class="size-full object-cover" />
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — first item auto-spans 2 rows via CSS

Hover Overlay with Icon

Preview

<div class="gallery gallery-cols-3">
  <div class="gallery-grid">
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=90" alt="" />
      <div class="gallery-item-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" class="gallery-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
      </div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=91" alt="" />
      <div class="gallery-item-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" class="gallery-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
      </div>
    </div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=92" alt="" />
      <div class="gallery-item-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" class="gallery-item-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-2">
  <div class="group relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=90" alt="" class="size-full object-cover group-hover:scale-105 transition-transform" />
    <div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-8 text-white opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
    </div>
  </div>
  <div class="group relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=91" alt="" class="size-full object-cover group-hover:scale-105 transition-transform" />
    <div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-8 text-white opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
    </div>
  </div>
  <div class="group relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=92" alt="" class="size-full object-cover group-hover:scale-105 transition-transform" />
    <div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-8 text-white opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — CSS hover transitions handle overlay and icon

More Indicator

Preview

+12

<div class="gallery gallery-cols-3">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=100" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=101" alt="" /></div>
    <div class="gallery-item">
      <img src="https://picsum.photos/400/400?random=102" alt="" />
      <div class="gallery-more">+12</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-2">
  <div class="relative overflow-hidden rounded-lg aspect-square"><img src="https://picsum.photos/400/400?random=100" alt="" class="size-full object-cover" /></div>
  <div class="relative overflow-hidden rounded-lg aspect-square"><img src="https://picsum.photos/400/400?random=101" alt="" class="size-full object-cover" /></div>
  <div class="relative overflow-hidden rounded-lg aspect-square">
    <img src="https://picsum.photos/400/400?random=102" alt="" class="size-full object-cover" />
    <div class="absolute inset-0 flex items-center justify-center text-white text-2xl font-semibold" style="background: rgba(0,0,0,0.6)">+12</div>
  </div>
</div>

Requires: tw.min.css

// Click "+12" to open lightbox showing all remaining images

Loading Skeleton

Preview

<div class="gallery gallery-cols-3">
  <div class="gallery-grid">
    <div class="gallery-item gallery-item-loading"></div>
    <div class="gallery-item gallery-item-loading"></div>
    <div class="gallery-item gallery-item-loading"></div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-2">
  <div class="aspect-square rounded-lg animate-pulse bg-base-200"></div>
  <div class="aspect-square rounded-lg animate-pulse bg-base-200"></div>
  <div class="aspect-square rounded-lg animate-pulse bg-base-200"></div>
</div>

Requires: tw.min.css

// Replace skeleton items with real images once loaded

Auto-fill Columns

Preview

<div class="gallery gallery-cols-auto">
  <div class="gallery-grid">
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=110" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=111" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=112" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=113" alt="" /></div>
    <div class="gallery-item"><img src="https://picsum.photos/400/400?random=114" alt="" /></div>
  </div>
</div>

Requires: ux.min.css

<!-- Auto-fill: repeat(auto-fill, minmax(200px, 1fr)) -->
<div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))">
  <div class="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
    <img src="https://picsum.photos/400/400?random=110" alt="" class="size-full object-cover" />
  </div>
  <!-- ... more items ... -->
</div>

Requires: tw.min.css

// No JavaScript required — CSS auto-fill handles responsive columns