# Masonry Grid

> A responsive multi-column masonry photo grid with pulsing skeleton placeholders, lazy-loaded fade-in images, hover action buttons, a skeleton-preview toggle, and full design-system token integration.

- Category: Gallery
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: skeleton
- Page: https://builder.atheros.ai/components/masonry-grid
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_masonry_grid/preview-849b5e2a6d1b.webp

## Features

- Multi-column CSS `columns` masonry layout that reflows 4 → 3 → 2 → 1 columns across breakpoints
- Varied aspect ratios per item (landscape, tall, portrait, small) for an organic masonry rhythm
- Shimmer skeleton placeholders with a sweeping gradient shown until each image decodes
- Per-item accent hue via the `--hue` custom property — tints the skeleton gradient, icon and avatar
- Lazy-loaded images (`loading="lazy"`) that fade and scale in once decoded
- Hover action buttons (Like, Bookmark, Share, Download) that stagger in with backdrop blur
- Skeleton-preview toggle that flips the whole grid between skeleton and image states
- Graceful image-error handling — a broken image keeps its skeleton visible instead of a blank box
- Staggered card entry animation driven from JS via per-item `animationDelay`
- Light and dark token sets wired through semantic aliases and `--dark-*` sources
- Respects `prefers-reduced-motion: reduce` — all animations and transitions collapse

## Accessibility

- **Gallery landmark** — `<main class="masonry">` carries `aria-label="Photo gallery"`
- **Action buttons** — Each hover action button has an `aria-label` (Like, Bookmark, Share, Download)
- **Skeleton toggle** — Floating toggle button exposes `aria-label="Toggle skeleton view"`
- **Alt text** — Every image has a descriptive `alt` attribute
- **Lazy loading** — All images use `loading="lazy"` for performance
- **Focus indicators** — Action buttons and the skeleton toggle expose `:focus-visible` outlines
- **Touch fallback** — Hover actions become always-visible at the mobile breakpoint
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations and transitions

## Common questions

**Which frameworks is Masonry Grid available in?**

Masonry Grid ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Masonry Grid gallery component free?**

Masonry Grid is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Masonry Grid support dark mode?**

Yes. Masonry Grid ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Masonry Grid live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/masonry-grid

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt