Portfolio grid gallery · 1.0.0

A three-column portfolio image grid with captions and a keyboard-operated lightbox.

HTML: open index.html as the complete specimen. Copy snippet.html into your page and load snippet.css after your existing CSS. Load snippet.js once with defer. demo.css and the surrounding demonstration content are not part of the reusable component. Replace example links and details.

Astro: copy Snippet.astro into src/components and import it in your page or shared layout. Copy the images folder to public/snippet-assets/portfolio-grid-gallery/images; image paths in the component target that location. The component uses scoped class prefixes and global CSS for its own markup. Use one instance per page; change all IDs/prefixes before duplicating a component. An Astro component is provided, not a complete Astro starter project.

A regular image rhythm makes it easy to scan a small body of work. Captions identify each view, and the image links still open their local files without JavaScript.

Photographs are licensed illustrative assets, not original work of a fictional business. Keep source and license information in ASSETS.md. Replace dimensions and alternative descriptions when changing images.

Testing: check links, keyboard focus, narrow widths, zoom and actual content after integration. Included scoped styles avoid broad element resets; your existing CSS may still affect the result. Original code: MIT, attribution link optional. Keep the license notice in redistributions.