Flex Demonstrator + Grid

ok tailwind and grid demonstrator

https://sjwjaw.co.uk

Test here

Link no longer valid

This was great; thanks!

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

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

The updated project below generates code that will work in Elements custom component, replicates what you create on the demonstrator

Download no longer available

ignore that one if you would like to copy the code :joy: :joy: :joy: :joy:

Needs desktop really mobile more difficult to scroll up and down

delete all tomorrow morning

updated test site

https://sjwjaw.co.uk

project - elementsapp://downloadDocument/YAgDnu3NQb48

https://cleanshot.com/share/xxBGH16hZKYtWDFX0N4n

updated with better overlapping select - elementsapp://downloadDocument/xTGvupe4KxWD

All links and downloads no longer available

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!

container as flex

simulator

Elements

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

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

project - elementsapp://downloadDocument/Yza7xYlw6lLi

adjusted top images and more realistic staples (stretch there :joy:), website updated

OCD on staples - elementsapp://downloadDocument/JzSvikOX2iXH

Download links no longer available

I think the staples are cool (Elements), had to add a little tailwind because divider is missing controls

Colour and text also missing controls