MasonryGallery

A CSS columns-based masonry layout for images. Uses the columns CSS property (not CSS Grid) for a true masonry effect where items fill columns top-to-bottom. Composes LightboxImage for lightbox integration, sharing the same GalleryItem type as Gallery.

File: src/core/components/ui/MasonryGallery.astro

Props

Prop	Type	Default	Notes
items	GalleryItem[]	required	Array of gallery items (shared type with Gallery)
columns	number	3	Number of masonry columns
gap	"sm" | "md" | "lg"	"md"	Gap between items
group	string	auto-generated	Lightbox group name for navigation grouping
class	string	—	Additional CSS classes

Usage

---
import MasonryGallery from "@core/components/ui/MasonryGallery.astro";
import Lightbox from "@core/components/ui/Lightbox.astro";

const images = [
  { src: "/images/tall.jpg", alt: "Tall image" },
  { src: "/images/wide.jpg", alt: "Wide image", caption: "A caption" },
  { src: "/images/square.jpg", alt: "Square image" },
];
---

<MasonryGallery items={images} columns={3} />

{/* Page-level Lightbox required */}
<Lightbox />

Accessibility

• Each image is wrapped in a <figure> with optional <figcaption> for captions.
• Uses LightboxImage for accessible image markup with proper alt text.
• Does not include its own <Lightbox> — relies on the page-level Lightbox contract.
• CSS columns layout may order items differently than source order in some browsers. Items flow top-to-bottom within each column rather than left-to-right across rows.