About Quartet Image Grid
A product photo grid that grows any photo to full size, with one click.
Four photos in a 2×2 grid for use on a product page. Click a photo and it grows to the size of all four, click again (or press Escape) and it slides back into place.
Just upload your photos and you are done. And because it works with the CMS too, one Quartet in your product template gives every product its own gallery.
Upload photos or use it on a CMS page
Using Quartet is as simple as uploading four photos. On a CMS page you can bind each photo to an image field of your collection instead. Place Quartet once on your product template and every product page shows its own photos automatically, with nothing to set up per product. A product with fewer photos simply leaves the remaining places empty; a single photo fills the whole grid.
Features
Upload your photos directly, no setup needed
Works on CMS pages too: bind the photos to image fields and every product page gets its own gallery
2×2 grid; a click grows any photo to the size of all four
Smooth, GPU-friendly animation with a subtle bounce
Hover zoom and a clear enlarge icon
Photo ratio from a dropdown: 16:9, 4:3, 1:1, 3:4 or 9:16
Adjustable gap and corner radius
Fast loading: sharp, correctly sized images in WebP, served from Framer's image CDN
No layout shift: the grid has its final size before anything loads
Accessible: full keyboard support (Tab, Enter, Escape), focus returns to the photo you came from, screen-reader labels you can translate, and no animation for visitors who prefer reduced motion
Setting it up
Add Quartet to your page and set its width to Fill.
Upload your photos to Photo 1 to Photo 4. On a CMS page, bind them to image fields of your collection instead.
Pick a ratio, a gap, a radius and your colours.
That is all. The height follows from the width, so you never set one.
