One block, five layouts. Switch between them in the Layout panel at any time – the photos, captions and categories stay the same. Every layout filters, opens the lightbox and adapts to phones.
| Layout | Best for | Crops photos | JavaScript |
|---|---|---|---|
| Masonry | Mixed portrait and landscape photos | No | 1 KB placement script |
| Justified rows | Photo-book look, even rows | No | 1 KB placement script |
| Grid | Products, teams, anything that should line up | Yes, to a ratio or height | None – pure CSS |
| Carousel | Heroes and long series in little space | No | Navigation, loaded on demand |
| Accordion | A compact strip that opens on hover or click | Closed slices only | Only for “open on click” |
Columns, row height and aspect ratio can differ per device: desktop, tablet (under 782px) and mobile (under 600px).
Masonry
Each photo goes into the shortest column, so the columns end at similar heights while the reading order stays left to right. A 1 KB script places the items before the first paint, so nothing jumps. Where the browser supports native masonry (display: grid-lanes) the script steps aside.
Options: columns and gap per device. Without JavaScript, masonry becomes a plain column grid.
Justified rows
Every row fills the full width at about the same height, and every photo keeps its proportions. Rows break where the height fits best. Built with flexbox: each item grows in proportion to its aspect ratio.
Options: row height per device (240 · 200 · 160 px by default), gap.
Grid
Cropped to one shape. Choose aspect ratio (1:1 by default; tablet and mobile can have their own) or fixed height. Pure CSS grid with aspect-ratio and object-fit.
Carousel
One row that scrolls sideways with scroll-snap. Swipe on phones, use the arrows or the arrow keys. Picking the carousel sets a slide height of 400 · 320 · 260 px and a 12px gap, as long as you haven’t changed those yourself.
| Option | Values |
|---|---|
| Arrows | on the photos (default), circle buttons, filled buttons, minimal arrows, follow the mouse (left or right third; touch swipes), none. Arrow keys always work. |
| Autoplay | 2 s by default; 0 = off, 0.5–10 s. Pauses on hover, on focus and off screen; off with reduced motion. |
| Move per click | 1 photo, a page, 2 or 3 |
| At the end | loop (endless both ways: copies of the photos fill about two screens on each side, and the row jumps back by one round while nothing on screen changes, so it never pauses at an end or shows a photo still loading; the copies are hidden from screen readers and the keyboard, and a click on one opens the real photo. If every photo fits on screen, it rewinds instead), stop, rewind to the start |
| Slides visible | 0 = the photos’ own widths, or 1–6 equal slides (at most 2 on tablets, 1 on phones) |
| Center the current slide | on by default; slides snap to the middle and the ones beside it fade back (scroll-driven, no JavaScript). Works with every end mode; “a page” then moves one slide. |
| Show scrollbar | off |
Accordion
Slices that open to the photo’s own width, so the open photo is never cropped. On phones the slices turn vertical. Open a slice on: click (default – a click on the open slice then runs the click behavior) or hover. Hover mode needs no JavaScript.
Reveal on scroll
Photos animate in as they scroll into view: rise, fade, zoom, blur, tilt up, wipe, pop, flip, slide (neighbours come in from alternating sides) or iris. The reveal is staggered: neighbouring photos arrive one after another instead of a whole row at once. It works on masonry, rows, grid and the carousel (which reveals sideways). The effect is a CSS scroll-driven animation – no JavaScript, and nothing runs with reduced motion or in browsers without scroll-driven animations; those simply show the photos.
Each photo animates over the same scroll distance from where it enters, so tall and short photos reveal alike. Stagger (2.5 rem by default, 0–6) is the scroll distance between neighbours starting: larger values spread a row out more, 0 brings a row in together. It applies to masonry, rows and grid.
Turn it on under Items → Reveal on scroll. In the editor the reveal plays in Preview mode; autoplay and hover effects run only on the front end.
See all five live, with their settings as switchable chips, on the Layouts page and in the playground.