> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Masonry Gallery

Image grid with captions

- Category: Components
- Tags: gallery images portfolio grid

## 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 source

```html
<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>
```