Dimensional Grid Gallery

Package: dimensional-grid-gallery
Year: 2025
Project Type: Open source React component on npm
Stack: React, TypeScript, Rollup, CSS
Source: GitHub

Overview

Showing a handful of photos in a post looks easy until the photos are different sizes. I wrote this component to solve it once, and published it on npm so anyone can drop it into a React app.

You pass it a list of image links, and it picks the right layout.

Features

• A layout for one, two, three and four images
• With more than four, the last tile shows a +N counter for the rest
• Images keep the proportions of the first image, or can be shown as squares
• If there is a wide or tall image, it leads the grid and the square ones fill in around it
• Clicking any image opens a lightbox with next and previous buttons
• Written in TypeScript and bundled with Rollup, with types included

Usage

Install it with npm install dimensional-grid-gallery, then render <GridGallery images={images} /> with a list of image links.

Conclusion

This was my first published package. Turning something I had built for a project into a reusable library taught me to think about a clear API, sensible defaults and how a bundle reaches other people's apps.