Search blocks by description or jump to a page.
A responsive grid of evenly sized image tiles. Use it to display many photos, products, or case studies at once with a clean, scannable layout.
Grid Gallery is a responsive image grid with a live category filter bar above it. The filter row holds an "All" button followed by one pill button per unique category derived from the images. Below it, images are arranged in equal square tiles across one to four columns depending on screen width. Each tile shows category badges in the top right corner, and on hover a semi-transparent overlay slides in from the bottom with the image caption.
Every image carries an array of categories that drives both the filter
buttons and the per-tile badges. You can add or remove images, rename
categories, or set the enableFiltering flag to hide the filter row
entirely. The grid reflows automatically, so the item count is not fixed.
Reach for this block when you need to present a sizeable collection of visuals and want visitors to narrow them down without leaving the page. It is a better fit than a carousel when the audience wants to compare items side by side, and better than a masonry layout when uniform tile sizes keep the content feeling structured and professional. For a creative agency or studio it works well on a "Work" or "Projects" page where clients browse by discipline before clicking through for detail.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The grid suits any collection that benefits from category-level browsing. Three ways to use it beyond the default city photography demo:
Tip: keep category names short, ideally one word, so the filter row stays on a single line at typical viewport widths and does not push the grid down.