Masonry Grid

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

Customise it with AI

Open Masonry Grid in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the gallery is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.