Gallery
A masonry image gallery that distributes images across columns using Alpine.js. Images render into a hidden source container and are round-robin distributed into column divs on init, so odd-sized images stack naturally without gaps. On mobile, images stack in a single column; on tablet and up they split into the configured column count.
Two-column mode uses asymmetric widths on extra-large screens (5/12 and 6/12) for an editorial look. A flip checkbox swaps which column is wider. Three-column mode uses equal-width columns with no flip option.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Section ID | Optional anchor for jump links. |
| Columns | Two or three columns. Default two. |
| Flip | Swaps which column is wider in two-column mode. Only visible when columns is set to two. |
| Padding top / bottom | Default 48/64/80px each. |
Blocks
Section titled “Blocks”Repeatable:
- Gallery Image — an image with an optional text caption. The caption renders below the image in small, muted type. Images without a caption render cleanly with no extra spacing.
Where it’s used
Section titled “Where it’s used”Homepage, about pages, and editorial landing pages for lifestyle or product photography grids.
- Mix portrait and landscape images. The masonry layout handles varied aspect ratios naturally — that’s the whole point. A grid of identically sized images would be better served by a standard grid section.
- Four to eight images is the sweet spot. Fewer than four looks sparse in two columns; more than eight starts to overwhelm the page.
- Use captions sparingly. One or two captioned images in a set of six adds context without turning the gallery into a catalog.
- The flip setting is subtle but useful. In two-column mode, the wider column draws the eye. Flip it so the stronger image lands on the larger side.
- Reorder blocks to control column placement. Since distribution is round-robin, the first block always lands in the left column. Drag blocks in the sidebar to get the pairing you want.