PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills Prompts Guides Collections Changelog About

Components / Masonry Gallery

14 Component galleryimagesportfoliogrid .md

Masonry Gallery

Image grid with captions

Live preview — rendered in this site's theme Masonry Gallery
Specimen one
01 · Editorial study
Specimen two
02 · Grid exercise
Specimen three
03 · Type specimen
Specimen four
04 · Color field
Specimen five
05 · Texture pass

Usage

CSS multi-column masonry: no JS, natural reading order down each column.

Rules

  • break-inside-avoid on figures prevents image splitting across columns.
  • Captions BELOW images (not overlaid) stay readable at all contrast levels; overlay only with a gradient scrim.
  • Slight desaturation (grayscale-[30%]) unifies mixed photography; restore on hover.
  • Numbered captions continue the site-wide numbering system.
  • For lightbox behavior use <dialog> — no external libraries needed.
  • Alt text describes content, not vibes ("editorial layout study", not "beautiful design").

HTML Copy-paste source

<div class="columns-2 md:columns-3 gap-4 max-w-5xl mx-auto [column-fill:_balance]">
  <figure class="mb-4 break-inside-avoid group relative">
    <img src="https://picsum.photos/seed/pw1/600/750" alt="Specimen one" class="w-full grayscale-[30%] group-hover:grayscale-0 transition duration-500" />
    <figcaption class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-base-content/50">01 · Editorial study</figcaption>
  </figure>
  <figure class="mb-4 break-inside-avoid group relative">
    <img src="https://picsum.photos/seed/pw2/600/450" alt="Specimen two" class="w-full grayscale-[30%] group-hover:grayscale-0 transition duration-500" />
    <figcaption class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-base-content/50">02 · Grid exercise</figcaption>
  </figure>
  <figure class="mb-4 break-inside-avoid group relative">
    <img src="https://picsum.photos/seed/pw3/600/600" alt="Specimen three" class="w-full grayscale-[30%] group-hover:grayscale-0 transition duration-500" />
    <figcaption class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-base-content/50">03 · Type specimen</figcaption>
  </figure>
  <figure class="mb-4 break-inside-avoid group relative">
    <img src="https://picsum.photos/seed/pw4/600/800" alt="Specimen four" class="w-full grayscale-[30%] group-hover:grayscale-0 transition duration-500" />
    <figcaption class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-base-content/50">04 · Color field</figcaption>
  </figure>
</div>