 In my last video, I gave a first look at the all new grid containers with Elementor and I found this to be a welcome new feature, but the only thing is is quite basic straight out of the box. Like it could only do really basic CSS grid stuff. I wanted to push it to the limits and see what kind of complex grids can I create using the grid containers. So I geeked out and created a bunch of grid layouts like this. And I packaged all these up into a template that I'm going to share with you. I'm going to walk you through how to create these types of grids, also how to use this template that I created just to make things a whole lot easier and faster. Everything is pre-built already. We're not going to build anything inside of this video. I already did all of that inside my previous video. I'll leave a link somewhere up here at the top, also inside the description. I really suggest for you to watch that video along with this one because they pair together perfectly. Let's start by taking a look at the different grid layouts that I have created here in this template. We're going to check them out. I'm going to show you how to use these. Then I'm going to show you how they work and we're going to follow all this up with how you could get this free template. Now each of these layouts right here, and there's 12 of them. These are all the different layouts that I find myself using most often inside my design process. Also the most common type of layouts that I see inside modern web design. Now if you do have a layout idea, something you want to achieve like this and you don't find it here, let me know. I'd be happy to add new layouts to this template. I'm always open also for new creative ideas. So let's see how to use these. Everything is ready to go. What you would do is you would look at the section you want to build on your site, the layout that you need to create that section, find one that matches here and then you just copy and paste the outer container of it. So let's take a look at this layout. I'm going to copy it. I'm going to go over to this page right here where we're going to build it on and then you just paste it here. Now you're going to see this extra space on the bottom but don't worry about it. We will not see that in the front end. This is just part of the grid containers. Now you might be wondering how come we're not using flex containers to build a layout like this because you can't achieve a layout like this using flex containers. And the reason why I would go with this method of grid containers for layout like this is because you're going to use less containers. For example, right here on this left side where we have this block of four grid items, in order to do this with flex containers, you're going to need to create an inner container here and then you're going to have to add inner containers inside of the inner container. So by using the grid containers now and using this method, we're going to avoid having to put an inner container inside of the inner container, which is going to have cleaner DOM less divs is going to have less code output just cleaner code. So let's go ahead and get started and take a look at what we could do here. So you could go ahead and delete the item inside here. Start putting in your own. I'm going to drop in the header. Let me go ahead drop in some text and just keep it super basic right now. Let me go ahead and style this up so it doesn't look all weird. All right, you can see my OCD kicking in right now. All right, I'm going to make this smaller too. That way we don't have too much text. Okay, so we're good to go right over here and I could add some spacing, but we're not going to do all that. The next thing you're going to want to do is you're going to probably want to remove this dashed outline and maybe fix your padding inside of your block right here. So you're going to do all that inside the container. Go here on your container and you can go to style over the border. And then from here, you could turn your border into solid. You could remove it. You could do whatever you like with it. You could even add a box shadow to it. In fact, let me do that. I'm going to add some box shadow here. Go ahead and put 40 and I'm going to minus five here and then I'm going to drop this all the way down to 0.15. Make this very subtle. All right, I'm going to remove the border. In fact, I'm going to keep the border, but I'm going to reduce the color on it just to make it really light. And now I could go ahead and copy this border style and let me just paste the style so we make everything go a lot quicker. All right, now we could go ahead and do other things. Do you want to have little text groups right here? Also, what I like to do in a grid like this, I like to add call to actions too, like we could use this block as a call to action. Let me drop a button right here. Drop it right underneath this. We're going to turn this into a cool call to action. Let me go ahead and give this a background color. I'll turn this white. Let me turn this text white right here as well. And then I'll change the background of this block just to make the call to action stand out. And this is only give ideas of what we could do. Now another thing I like to do right here, say in a layout like this, maybe I want to have a big image right here. I mean, you could put an image, you could put a video, you could put a map. There are a lot of different things you could do. Now for this one, I'm going to go to my outer container here. I'm going to go here to my background. I'm going to put in a background image. Let me go ahead and choose one. We'll go ahead and use this. I'll style it up position center center. No repeat and display cover. And then I would get rid of the dash outlines here inside the container settings under style border. I go here turn it onto none. And then I could also remove the padding. That way we don't need any padding right here. And you can see how quickly we could build out a layout like this. So this is fully responsive all of them are if we go here to the responsive mode, we have a setup for tablet and then we have a setup for mobile as well. And then going back over here, well take a look, everything is fully responsive. They're all good to go. And basically it's kind of like a plug and play just copy and paste and then have fun being creative with them. Something else though you might want to do is you might want to control the spacing in between the different grid items or blocks over here. You would do that inside your outer container. You would go over to your gaps and you would control the spacing across all of them. Now I preferably like to keep all my spacing very even. That's the reason why I like to keep my column and rows the same. But it's totally up to you. You can go ahead and add more spacing down here do as you like. But as a good design, best practice, I would keep them all even. I love consistency when it comes to spacing and padding. It just makes the blocks in the grids look so much cleaner. Now let's go back over to our templates and take a look at how these work. Now first you could copy and paste all of these just like how we did with that example and use them exactly the same. The only difference is going to be the layouts. Now if you look at these, there's always going to be one item that is spanning across multiple sections. Like these take up a third, but then we have this one spanning the whole way through. It's taken up three spaces. Same thing here. Well, this is just flipped around. You can see this one here is spanning horizontally and is spanning vertically as well as taking up spaces going sideways and going up and down. And each of these items are spanning, these grid items are spanning. These are where we add the custom CSS. Now to find that, you're going to go and click on the container or inner container for the spanning item, the item that is stretching. And you're going to find that here inside the custom CSS. Now to keep everything simple. I only added custom CSS to the spanning items. I wanted to keep everything minimal and as simple as possible. But with CSS Grid, there's still a lot more that we could do. We're only scratching the surface right here. Now if you're comfortable with Grid CSS, you could also use this as a starting point as well. To get the free template, there's a link inside the description that takes you to this blog post right here. Now inside this blog poster is a sign up and the free template it is for newsletter subscribers. So if you do want to subscribe to newsletter, that's super awesome. I do plan on having a lot more useful content, resources and stuff like this being sent out. So you just go ahead and fill this out and then you would get an email that looks like this with a download link where you could go ahead and download the template. I'll show you how to set that up in a moment. But if you do not want to sign up, don't worry. There's no hard feelings at all. I do have everything else that you need over here. So if we scroll down a little bit, we're going to see all the different Grid layouts. You're going to see an example of it right over here and then the CSS for it. So let's say for Grid layout number one, you would go over here and you can see here's Grid layout number one. We're going to apply the CSS to the Grid item that is spanning and that's going to be this one here. So we just go ahead and click on the container, go to Advanced, Custom CSS. And then right here you got the CSS to copy and paste inside of there. So you could do it the easy way. Also it would be super awesome if you do sign up for the Lightbox newsletter. You'll get a lot of cool stuff coming through there. But if you also don't want to, we have everything else here for you where you can go ahead and just manually set it up on your own as well. It's all good. Now, once you do have it, let me take you over here. I got another site here and I'm going to go over here to my Finder and here is the template that I downloaded. Then I'm going to go over here to Import Templates, Choose File. And I'm going to upload this JSON file right here. Let's go ahead and open that, import it. And now I have it right here. Let's go ahead and take a view at it. Let's take a look and here we go. We got it now. Don't worry about this stuff. This is all like part of this testing website that I have right here. But it's all going to work the same. It's that easy. We could go ahead and edit with Elementor. And now from here, you're going to be able to copy and paste these sections over into your layout, making your workflow a whole lot quicker. I hope you found this tutorial helpful and I hope that you can find ways to put this grid template to use and create some super dope layouts and websites. Also, I would love to see what you create. Now, if you have any questions, please feel free to drop them aside the comments. I'm happy to help everyone out. Also, you know, if this does help out and you find value in it, make sure to do all that good YouTube stuff like like and subscribe. Well, I really appreciate you watching and I'll be back again soon. Thank you.