In this video tutorial I give a brief overview of how to use the Grid component in Elements. I show you how you can quickly build complex layouts using our powerful WYSIWYG editor — No code, or css classes required
If you’re familiar with writing HTML or Tailwind CSS, you’ll appreciate how amazingly easy it is in Elements to produce these layouts in seconds rather than hours!
Feedback
Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below.
Absolutely love this! And I must say, I’m equally chuffed that you’re giving a nod to the TailwindCSS community. Brilliantly done! What a fantastic opportunity to expand your market. Simply smashing!
Just having a bit of fun this AM. I told AI I live in England and this is how it grammar checked my post.
Excellent Dan, it’s helped my basic understanding of grids a lot. I’d love to see a follow up using images showing how to manage scaling and cropping whilst keeping the grid items ‘full’.
I would like to have an overlap from one grid item to another but with no animation effects. I set the trigger to “static” and entered some value in the Transforms settings. But nothing happens. Any idea how to get what I want?
Just tried it and it works here, we’d need to see your project and specifically where you’re trying to do it… better still, can you put together a demo project and send it over?
The CSS Grid implemented in elements seems a bit basic. Will we see things like grid template areas etc, for content positioning at a later point? That’s an amazing feature for really complex grid layouts. You achieved overlapping grid containers using negative margins, but that’s not the real thing
