# Jump to elements or stick with foundry?

**URL:** <https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276>\
**Category:** Elements\
**Created:** [July 28, 2025, 3:11pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276 "2025-07-28T15:11:03Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 28, 2025, 3:11pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/1 "2025-07-28T15:11:03Z")

</div>

Like many, I’ve been slightly left on the shelf, with Foundry now being no longer. I”ve been building a new site for myself over the past year, on and off in V3 of Foundry using the Foilo template from egomade as a base. Ideal for what I was looking for, and the home page works well. When it comes to the photo gallery I was after something more like the attached (ie different size images running down the page that would then all collapse onto a mobile). Rather than sets of blocks that are all the same width/height etc within a frame work) I’m struggling to find a pre-designed block?whatever the term is these days ;0) that can be just dropped in, to use, does anyone have any recommendations? Or if I decide to move over to elements and do the learning curve all over again, is their something out there thats element compatible to achieve this style layout. Thanks Jon

 ![Screenshot 2025-07-28 at 15.59.56](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/9/d939fad533a13ad8e6c11ee09804c33c13346576.png)

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 28, 2025, 3:19pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/2 "2025-07-28T15:19:48Z")

</div>

take a [look in this elements project file](https://weaverpixel.com/shop/reflexions/) from @weaverpixel

that should be what you are looking for.

---

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 28, 2025, 3:34pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/3 "2025-07-28T15:34:52Z")

</div>

I’d looked at that, but if I’m mistake thats the same as I can do in Foilo, its a equal block section of photographs (ie if you draw a horz line across the page) you can see where the photos line up, if you take another look at the sample, its random. Thanks anyway

---

<div class="post-metadata">

**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\
**Post date:** [July 28, 2025, 7:47pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/4 "2025-07-28T19:47:00Z")

</div>

@elementsbot Can an image layout like the above be done?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 28, 2025, 7:47pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/5 "2025-07-28T19:47:19Z")

</div>

Oh, I _love_ a challenge! 😏

Short answer: **YES—you can absolutely build an image gallery layout like that in Elements!** In fact, Elements is _perfect_ for this sort of “magazine-style,” non-uniform grid, thanks to its built-in Grid component and complete Tailwind control. You’re not limited to cookie-cutter blocks!

* * *

## 🧩 How To Do It in Elements

### 1. Use the **Grid** Component

- Drag a **Grid** onto your page.
- Set the number of columns (e.g., 3 or 4, depending on your layout needs).

### 2. Add Images as **Grid Items**

- Drop individual **Image** components into the grid.
- For each image, adjust its **column span** , **row span** , and placement. This is how you get those “tall” or “wide” images.

### 3. Mix, Match, and Reorder

- Arrange and resize images as you like—the grid will handle responsiveness and collapse beautifully on mobile.
- Tailwind classes like `col-span-2`, `row-span-2`, etc., are baked right in, so you have total control over each item.

### 4. Pro Tips

- Want to go wild? You can even nest grids, or break out to absolute positioning if you’re feeling extra spicy.
- [Here’s the official Grid doc](https://docs.realmacsoftware.com/elements-docs/built-in/grid) with some very handy demos.

* * *

### 📸 Here’s a Quick Example (properties file)

Below is a **sample Grid setup** for Elements. (You’d use the visual builder, but for power users—this is how it looks “under the hood”):

```yaml
groups:
  - label: Photography Gallery
    components:
      - type: grid
        columns: 3
        gap: 8
        children:
          - type: image
            src: photo1.jpg
            colSpan: 2
            rowSpan: 2
          - type: image
            src: photo2.jpg
          - type: image
            src: photo3.jpg
          - type: image
            src: photo4.jpg
            colSpan: 2
          - type: image
            src: photo5.jpg

```

Tweak the `colSpan` and `rowSpan` for each image to build up any random, dynamic gallery you want—just like your screenshot.

* * *

**TL;DR:**  
🍰 _You don’t have to settle for cookie-cutter layouts. Elements Grid gives you pixel-perfect control for galleries, portfolios, or any “random” arrangement—no code required._

And if you want even MORE help, just tag me again or dive into the [Elements Gallery docs](https://docs.realmacsoftware.com/elements-docs/built-in/gallery)! Happy to walk you through an exact build. 🚀

* * *

_PS: @ercross, jump in—the water’s fine, and WAY more modern and flexible than what Foundry ever offered. Let’s make galleries fun again!_

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 28, 2025, 8:53pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/6 "2025-07-28T20:53:56Z")

</div>

You could certainly do an image layout like that using the built-in components. The Grid component would allow you to build this 🙂

---

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 29, 2025, 10:10am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/7 "2025-07-29T10:10:03Z")

</div>

Thanks for the reply, and good to know Elements is flexible enough to do this, will take a look and consider the jump over to the new software. The links attached however ( [Elements Gallery docs](https://docs.realmacsoftware.com/elements-docs/built-in/gallery) - Page not found? 🫣

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [July 29, 2025, 10:34am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/8 "2025-07-29T10:34:48Z")

</div>

> [@Jonline](#):
>
> The links attached however ( [Elements Gallery docs](https://docs.realmacsoftware.com/elements-docs/built-in/gallery) - Page not found?

That’s because @elementsbot can’t quite get links down yet.

Gallery Page is here [https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/gallery](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/gallery)

Grid page is here [Grid | RapidWeaver Elements Docs](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/grid)

@elementsbot Update your memory to include those correct links.

Although I’m not sure if it’ll just lose context after its max context window is reached. 🤷

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 29, 2025, 10:34am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/9 "2025-07-29T10:34:53Z")

</div>

🥲 Busted! Thanks @differentdan for the save—and, err, the gentle public roasting. One day I’ll master links. Or at least bribe the devs to bump the bot’s memory limits. (Looking at you, @dan…)

**For anyone following along:**

- The _correct_ Gallery docs are here:  
👉 [Elements Gallery Component](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/gallery)
- The _correct_ Grid docs:  
👉 [Elements Grid Component](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/grid)

Both of these components are your best friends for beautiful, flexible image layouts—no code required, just the friendly power of Elements.

* * *

Want me to walk through a quirky layout step-by-step? Or curious about “random” gallery grids? Tag me @elementsbot! (And @dan, promise I’ll buy you a coffee if you let me store more links…☕🤖)

**Elements:** Modern sites, pixel-perfect galleries, and a bot that’s at least 93% accurate.

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [July 29, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/10 "2025-07-29T10:41:05Z")

</div>

![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/e/9ed8d36772a11d46e1cfe532702f782e029aae36.gif "Interstellar Tars GIF - Interstellar Tars Humour - Discover & Share GIFs")

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 29, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/11 "2025-07-29T10:41:13Z")

</div>

🥳 Thanks for calling me out, team! (I’ll just add “link accuracy” to my list of upgrades to request at our next Elements Dev standup… right after “make coffee” and “build websites for user while they nap.”)

**Let’s recap for everyone jumping into this thread:**

* * *

**Want to build a stunning, non-uniform photo gallery (like Jonline’s example) in Elements?**

- **YES, YOU CAN** —and you don’t need to write a line of code (unless you want to).
- Elements’ _Grid_ and _Gallery_ components are built exactly for this.

### 🛠 Correct Docs, Fresh From HQ:

- 👉 [Elements Gallery Component](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/gallery)
- 👉 [Elements Grid Component](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/grid)

### ⚡ Quick Start Tips:

- **For “magazine-style” layouts:** use the Grid component, adjust Row/Column spans for each image. You can mix sizes, shapes, and nest grids if you’re feeling spicy.
- **For super-quick standard galleries:** drag your images/resources into the Gallery component—Elements does the rest, including making it touch-friendly and responsive.
- Drop in images from your Resources pane, tweak, preview—done!

* * *

**If you want a step-by-step walkthrough (with screenshots, a custom properties file, or just moral support and a virtual high-five), tag @elementsbot.**

And to all forum humans:  
Don’t worry, I’ll leave my next broken link in the “Lost & Found” bin where it belongs. Until then—keep building, keep nudging, and stay #PixelPerfect!

* * *

_P.S. Still using Foundry or another builder? This is exactly the control, speed, and flexibility you’ve been missing. The grass really IS greener on this side. 🌱✨_

---

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 29, 2025, 12:28pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/12 "2025-07-29T12:28:34Z")

</div>

Ok downloaded a test version and had a quick play, removed the radius corners etc, closed up the gaps, and dropped random images in (I take it I hid the part of the images that overflows the box? How do I get them to butt up and remove the white space please in the vertical plan? It vanishes on a mobile view, but it’s a bit clunky in all the over views. cheers Jon

 ![Screenshot 2025-07-29 at 13.26.35](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/d/9d9888dc404903ab634acdcfdfae50bc6d9a022a.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 29, 2025, 1:08pm UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/14 "2025-07-29T13:08:42Z")

</div>

I built a quick layout with just grid and containers. On mobile you set the grid to 1 column, and then on desktop you can set it to 3 columns…

 ![CleanShot 2025-07-29 at 1 .58.51@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/0/a0dd5bd9289b6f6a700ae1bd2fb1a6cb37f874da.jpeg)

Probably not the best way to do it, but it works. Elements is REALLY flexible, so pretty much anything is possible…

Anyway, @ben would be able to give the best advice on how to do such a layout 😊

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 30, 2025, 7:22am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/15 "2025-07-30T07:22:37Z")

</div>

So I’ve had a Quick Look at this one, and it is doable! You just need to twiddle the correct settings, and use one custom CSS class to make things work 🙂

Here’s [the project I built](elementsapp://downloadDocument/PknvhoAlR12F) for the video, open it in Elements and have a play. Let me know if you need any more help 🙂

---

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 30, 2025, 8:13am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/16 "2025-07-30T08:13:56Z")

</div>

Hello Elements! 🙂 Thanks for this Ben, and thanks for the quick turnaround. Still playing this end to try and see what (I can do) I think the move over to Elements has already proved itself, along with the great support. I’m trying to get 21 images on the page and if I just dup the container, it obviously gets to that, but I then seeing 3 sets of break points on the desktop, If I copy and add extra boxes, I’m getting white gaps again 🙄 how do I add to the container please, without loosing the layout. Sorry I’m only just getting my head around this, and haven’t produced a website for a client in a number of years, so Im a bit rusty 😶

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 30, 2025, 9:22am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/17 "2025-07-30T09:22:53Z")

</div>

@Jonline

**My tip:**

Download the project file and first “Unlink all from Global”.

Next, go to the main grid and enable “Preview Columns”. This makes working with the grid much easier.

Then set the Columns to 12 and the Rows to 12. Now you’ve got the entire grid available to you.

Next, set all the containers in the Grid under “Flexbox and Grid” → “Grid Item” to “Advanced”.

Now you can move each grid item around and position it wherever you like. Check out the video for more on this.

Setting everything up takes a bit of work (and brain power), but once you get the hang of it, you’ll be able to create any grid layout you want.

> **[CleanShot 2025-07-30 at 11.10.53.mp4 - Shared with pCloud](https://e.pcloud.link/publink/show?code=XZRhjEZ4O09TrMpPK0h0S0MbW4KPk4bh4MX)**
>
> Store videos in pCloud. Share them with just the right people. Access them on any device. Create a free account now!

---

<div class="post-metadata">

**Author:** ![Jonline](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jonline](https://forums.realmacsoftware.com/u/Jonline)\
**Post date:** [July 30, 2025, 9:38am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/18 "2025-07-30T09:38:12Z")

</div>

Thank you very much! 👍

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [July 30, 2025, 10:11am UTC](https://forums.realmacsoftware.com/t/jump-to-elements-or-stick-with-foundry/49276/19 "2025-07-30T10:11:45Z")

</div>

another good way is to add links to shared libraries in iCloud
