# Build a Bento Grid in Elements **URL:** \ **Category:** Elements\ **Created:** [August 13, 2025, 10:02am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755 "2025-08-13T10:02:58Z")\ **Posts on this page:** 13\ **Page:** 1
**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:** [August 13, 2025, 10:02am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/1 "2025-08-13T10:02:58Z")
Building a bento grid in Elements is super easy, here’s a quick video and project to show you how to get started. 👉 [Open Sample Bento Box Project in Elements](elementsapp://downloadDocument/9DVOt3kNgbGZ) Have a play and let me know if you have any questions; Oh, and if you liked this and want to learn even more you should check out the [proper grid tutorial](https://forums.realmacsoftware.com/t/visually-building-grids-with-elements-and-tailwind-css/49692) @ben did earlier in the week 🤩 ---
**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:** [August 13, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/2 "2025-08-13T10:41:06Z")
That’s a really great video and it shows perfectly how to get the most out of the Grid component. I’d love to see a whole series of similar videos and small example projects, each focusing on the different Elements components (like Flexbox, Image Slider, Modal, Reveal, and so on). I think this would help a lot of people in the community when creating their websites – and it would follow in the footsteps of Adam’s (Elixir) very successful and helpful YouTube videos that he used to make. Two quick things on the side 😉 Loving the new component icons, and the “Empty Spacer” component is a nice touch! ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [August 13, 2025, 11:16am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/3 "2025-08-13T11:16:06Z")
Hi @dan A very useful video. 😀 I liked the idea of your Empty Spacer custom component. I see in the code … : ```auto
``` … what is the relevance of the **id=“{{id}}”** , i.e. how would one use that. It would seem that the class of **“pt-20”** could be defined as a property to enable different values to be used. Would it be useful to have this **Empty Spacer** as a standard component as it seems to be very helpful in visualising Bento grids? ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [August 13, 2025, 3:38pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/4 "2025-08-13T15:38:22Z")
way back in may I posted an example file of some “bento” grids I had a play with hope these help? elementsapp://downloadDocument/1TIPvNvrox7q ---
**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:** [August 13, 2025, 4:00pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/5 "2025-08-13T16:00:39Z")
> [@logrunner](#): > > … what is the relevance of the **id=“{{id}}”** , i.e. how would one use that. It would seem that the class of **“pt-20”** could be defined as a property to enable different values to be used. That’s just the default when you create an HTML component, although I believe it needs updating to `id="{{node.id}}"` so it outputs a custom id. Useful for targeting the element. > [@logrunner](#): > > Would it be useful to have this **Empty Spacer** as a standard component as it seems to be very helpful in visualising Bento grids? Hmm, would it 🤔 we added spacing to most components to avoid this… but, would be easy enough to add if users wanted one… Actually, I suppose I could have put dividers in them, with no BG colour… ![CleanShot 2025-08-13 at 5 .00.11@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/c/4c8fb33962cb1f53312699409790fe361e2e2a33.jpeg) And that’s the flexibility of Elements, so many ways achieve the desired outcome 😛 ---
**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:** [August 13, 2025, 4:06pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/6 "2025-08-13T16:06:10Z")
i would like one ---
**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:** [August 13, 2025, 4:50pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/7 "2025-08-13T16:50:53Z")
Okay, so you want a “Spacer” component with just some padding options? ---
**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:** [August 13, 2025, 7:29pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/8 "2025-08-13T19:29:15Z")
@logrunner margin and padding option should be enough!? ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [August 13, 2025, 9:02pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/9 "2025-08-13T21:02:27Z")
Yes, I should think so. 🙂 ---
**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:** [August 13, 2025, 9:11pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/10 "2025-08-13T21:11:22Z")
I think me and @ben talked about this before and decided it wasn’t needed, but the fact I created a custom component to do it, and you guys are requesting it perhaps means we should add one. @ben won’t be happy, but I’ll see if I can twist his arm 😛 Look out for it in the next build 🤞 ---
**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:** [August 13, 2025, 9:42pm UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/11 "2025-08-13T21:42:31Z")
sometimes, it’s those tiny little things that make us happy. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [August 14, 2025, 8:53am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/12 "2025-08-14T08:53:58Z")
If you have some time can I kindly ask you to look at my file above and comment, I am playing but love to learn. THANKS in advance! ---
**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:** [August 14, 2025, 10:51am UTC](https://forums.realmacsoftware.com/t/build-a-bento-grid-in-elements/49755/13 "2025-08-14T10:51:20Z")
@PMUK Looking good, seems like you have got the hang of it 👍