# Tutorial: The easy way to build complex CSS Grids **URL:** \ **Category:** Elements\ **Created:** [September 4, 2024, 2:27pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522 "2024-09-04T14:27:22Z")\ **Posts on this page:** 20\ **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:** [September 4, 2024, 2:27pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/1 "2024-09-04T14:27:22Z")
Hello again, 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 🤯 ![CleanShot 2024-09-04 at 3 .22.58@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/6/46e7d2c9bbe84d2510a591fdc76cc80cdbc07b13.jpeg) If you’re familiar with writing HTML or [Tailwind CSS](https://tailwindcss.com/docs/grid-template-columns), you’ll appreciate how amazingly easy it is in Elements to produce these layouts in seconds rather than hours! [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/8/c8f5b29580d0ff9b483c7c0bcf8f172e35a110b9.jpeg "The easy way to build Tailwind CSS Grids") ](https://www.youtube.com/watch?v=hGLq7e9FJwA) ### 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. Cheers, Dan & Team Realmac ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [September 4, 2024, 2:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/2 "2024-09-04T14:58:01Z")
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. 😃 ---
**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\ **Post date:** [September 4, 2024, 3:16pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/3 "2024-09-04T15:16:07Z")
Will you be able to overlap content from one grid item over another? ---
**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:** [September 4, 2024, 3:24pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/4 "2024-09-04T15:24:42Z")
Sure, you can even animate it if you like… ---
**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\ **Post date:** [September 4, 2024, 5:10pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/5 "2024-09-04T17:10:17Z")
Fantastic Video Dan! Thank you for creating it. Great tips! ---
**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:** [September 4, 2024, 10:06pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/6 "2024-09-04T22:06:24Z")
Glad you found it useful ☺ ---
**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\ **Post date:** [September 4, 2024, 11:12pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/7 "2024-09-04T23:12:51Z")
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’. ---
**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\ **Post date:** [September 8, 2024, 9:14am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/8 "2024-09-08T09:14:57Z")
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? ![Overlap](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/4/74cdcaacbf79c0bd71279aa8fc067d45bec87e94.jpeg) ---
**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:** [September 8, 2024, 2:03pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/9 "2024-09-08T14:03:47Z")
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? ---
**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:** [September 9, 2024, 9:24am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/10 "2024-09-09T09:24:03Z")
Hey @Bartje, I’m only guessing as to what effect you wanted to achieve with the grids, but hopefully this video should help! Let me know if you had something else in mind! ---
**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:** [September 9, 2024, 9:51am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/11 "2024-09-09T09:51:13Z")
Quick update… it seems this may not be working in the current beta. If you can’t get this to work, just hold on for the NEXT beta (sorry)! ---
**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\ **Post date:** [September 11, 2024, 2:26pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/12 "2024-09-11T14:26:07Z")
I have the latest beta from yesterday and it is still not working. ---
**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:** [September 11, 2024, 2:37pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/13 "2024-09-11T14:37:34Z")
Very strange, we’re investigating this again… will get it fixed! ---
**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:** [September 11, 2024, 4:30pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/14 "2024-09-11T16:30:04Z")
not working here either ---
**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\ **Post date:** [September 11, 2024, 6:23pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/15 "2024-09-11T18:23:02Z")
+1. … ---
**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\ **Post date:** [September 17, 2024, 8:42am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/16 "2024-09-17T08:42:12Z")
@dan still not working after yesterdays update. ---
**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:** [September 17, 2024, 8:43am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/17 "2024-09-17T08:43:12Z")
No, we’re still working on that one. Fingers crossed for the next beta 👍 ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [October 3, 2024, 3:17pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/18 "2024-10-03T15:17:30Z")
@dan In the video you mention that there are several ways to create Grid Items and then show being to do copy & Paste. What are the other methods? Is there a plus (+) option just to add a Grid Item which would seem an intuitive way to do it? ---
**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:** [October 3, 2024, 5:52pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/19 "2024-10-03T17:52:00Z")
Ah yes, well… we’re just changing how this works, more on that soon! ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [October 13, 2024, 8:42pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/20 "2024-10-13T20:42:21Z")
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 😉 [Next page](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522.md?page=2)