# Flex Demonstrator + Grid **URL:** \ **Category:** Elements\ **Created:** [August 13, 2026, 9:40pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343 "2026-08-13T21:40:40Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 13, 2026, 9:40pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/1 "2026-08-13T21:40:40Z")
ok tailwind and grid demonstrator ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 13, 2026, 9:50pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/2 "2026-08-13T21:50:25Z")
[https://sjwjaw.co.uk](https://sjwjaw.co.uk) Test here Link no longer valid ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 14, 2026, 11:29am UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/3 "2026-08-14T11:29:58Z")
---
**Author:** ![chet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/chet/32/35396_2.png) [@chet](https://forums.realmacsoftware.com/u/chet)\ **Post date:** [August 14, 2026, 1:13pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/4 "2026-08-14T13:13:35Z")
This was great; thanks! ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 14, 2026, 1:26pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/5 "2026-08-14T13:26:49Z")
forgot to unhide the menu - link should have menu so grid now there grid works on lines not the squares so the odd numbering one more than you think ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 14, 2026, 1:32pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/6 "2026-08-14T13:32:53Z")
ok upfront I never wrote these I used AI, no way could I invest the time to do this, I normally write my own stuff when it is quick and easy, not too much effort project here for free etc leave until tomorrow morning no use to me I understand grid and flex enough not to use these [elementsapp://downloadDocument/dsPCrOn5M2A1](elementsapp://downloadDocument/dsPCrOn5M2A1) The updated project below generates code that will work in Elements custom component, replicates what you create on the demonstrator Download no longer available ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 14, 2026, 1:49pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/7 "2026-08-14T13:49:38Z")
ignore that one if you would like to copy the code πŸ˜‚ πŸ˜‚ πŸ˜‚ πŸ˜‚ Needs desktop really mobile more difficult to scroll up and down delete all tomorrow morning updated test site [https://sjwjaw.co.uk](https://sjwjaw.co.uk) project - [elementsapp://downloadDocument/YAgDnu3NQb48](elementsapp://downloadDocument/YAgDnu3NQb48) [https://cleanshot.com/share/xxBGH16hZKYtWDFX0N4n](https://cleanshot.com/share/xxBGH16hZKYtWDFX0N4n) updated with better overlapping select - [elementsapp://downloadDocument/xTGvupe4KxWD](elementsapp://downloadDocument/xTGvupe4KxWD) All links and downloads no longer available ---
**Author:** ![chet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/chet/32/35396_2.png) [@chet](https://forums.realmacsoftware.com/u/chet)\ **Post date:** [August 14, 2026, 3:24pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/8 "2026-08-14T15:24:22Z")
If you are in this thread looking for the project/playground after the above links are deleted/don’t work, I’ve hosted it and will keep it up. I’m still trying to wrap my mind around the flex/grid components and this is very helpful to me! > **[Tailwind Flex Playground Β· Rapidweaver Elements](https://sandboxlab.io/grid/)** ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 14, 2026, 5:10pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/9 "2026-08-14T17:10:17Z")
container as flex simulator Elements ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 15, 2026, 9:31am UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/10 "2026-08-15T09:31:47Z")
its not just about boxes it a positioning component, switch row to col etc at different screen sizes or use wrap depends on your layout, items do not need to be in flex but single flexbox provides greater control ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 16, 2026, 6:43am UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/11 "2026-08-16T06:43:52Z")
showing a friend just how to use flex no grid for a page, got this far, bit more to show yet, simple no container as flex, next step after this just grid, delete end of day both demos and website try to always check it works online [https://sjwjaw.co.uk](https://sjwjaw.co.uk) project - [elementsapp://downloadDocument/Yza7xYlw6lLi](elementsapp://downloadDocument/Yza7xYlw6lLi) adjusted top images and more realistic staples (stretch there πŸ˜‚), website updated OCD on staples - [elementsapp://downloadDocument/JzSvikOX2iXH](elementsapp://downloadDocument/JzSvikOX2iXH) Download links no longer available ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 16, 2026, 3:01pm UTC](https://forums.realmacsoftware.com/t/flex-demonstrator-grid/57343/12 "2026-08-16T15:01:15Z")
I think the staples are cool (Elements), had to add a little tailwind because divider is missing controls Colour and text also missing controls