Gallery
CSS grid image gallery with lightbox integration. Click any image to open the lightbox overlay. Navigation cycles within the gallery group.
3-Column (default)
2-Column with Large Gap
Show code
import Gallery from "@core/components/ui/Gallery.astro";
import Lightbox from "@core/components/ui/Lightbox.astro";
const images = [
{ src: "/images/photo-1.jpg", alt: "Photo 1", caption: "First image" },
{ src: "/images/photo-2.jpg", alt: "Photo 2" },
{ src: "/images/photo-3.jpg", alt: "Photo 3" },
];
{/* 3-column gallery (default) */}
<Gallery items={images} />
{/* 2-column with large gap */}
<Gallery items={images} columns={2} gap="lg" />
{/* Page-level Lightbox required */}
<Lightbox />MasonryGallery
CSS columns-based masonry layout. Items flow top-to-bottom within columns, creating a natural staggered grid effect.
3-Column Masonry (default)
2-Column Masonry
Show code
import MasonryGallery from "@core/components/ui/MasonryGallery.astro";
import Lightbox from "@core/components/ui/Lightbox.astro";
const images = [
{ src: "/images/photo-1.jpg", alt: "Photo 1", caption: "Caption" },
{ src: "/images/photo-2.jpg", alt: "Photo 2" },
{ src: "/images/photo-3.jpg", alt: "Photo 3" },
];
<MasonryGallery items={images} columns={3} />
{/* Page-level Lightbox required */}
<Lightbox />