 It's official Elementor containers are finally out of beta since 3.16 launched and now we could use them freely without having to worry about anything. It's also time for us to step up our container game which we're going to be doing inside this video because not only do we got flex containers now we also got grid containers. Now the grids were launched a little while ago in 3.13 but I like to give things when they come to beta a little bit of a chance to go through a few updates and I am ready to show them to you now. Let's go ahead and give them a shot, I want to walk you through how to get started with the grid containers, how to use them but then also when to use them, when is the right situations you would want to use grid containers instead of the flex container. To get started we got to go back to our Elementor settings and we got to make sure we turn on both our containers and our grid. So go back here to features, scroll down and you can find your grid container here and turn that on to active. Now note at this time it is in beta and I do not recommend using a beta feature like this on a live website especially if it's sensitive. So this is great for testing, playing around or maybe if you're using a website that's not super sensitive but I wouldn't put it on the client's site quite yet, hopefully though that'll get out of beta soon. And then if we go down here now we can see in the stable features ever since 3.16 rolled out, we got flex container and it is shipped out now as active. So let's go take a look in the front end. Alright here I'm going to go to this page and select edit with Elementor and then down here let's check out our options. So now when we click on a new container you can see we have two new options showing the flex box and the grid. If we choose a flex box we're going to get the same exact things that we got before with flex. But if we choose grid you're going to see it's a bit different. Now you might think it looks very similar to container and it is in a way but I'll show you what those differences are. And actually let me show you the first really big difference. That is going to be if we go here to flex and let's say this layout right here it looks like a grid. We got this four box grid right here. Well if I select it here is the big difference and that is when we have a layout like this it's using a lot of inner containers. So we got an inner container here, here and here and that is how we're creating this grid right here but the problem with this is when we have more containers or inner containers like this that equals more code being loaded, more bloat, more divs, more dump and for best practices we want to minimize the amount of code being loaded on the page especially with Elementor since it's already very code heavy. So let's go ahead and exit out of there and go to the grid and we'll choose the same exact layout right here and if we choose it you see there's no inner containers and that is really the main big advantage right here is that we could create a layout like this. Now let me go back over to flex because you might already be a bit familiar with flex. Let me go here and add a little bit of space. I'm going to change this to RAM I'm just going to create a little bit of space to work with. And I'm going to put an icon box. All right I'm going to drop it in here and we could duplicate it and this is great right here if I want to create a row with three boxes I could go in here to my container to my layout and then I could go to my gap and I could put in you know like 20 pixels or you know I could put in RAM let me actually use RAM right here and I could create that space this is dope right here this is going to create clean layout clean code output well as clean as you could get with Elementor but what if we want to have this same row right here like this but with six we want three on top and three on bottom like this all right if we want to do that well the problem is okay now we got extra containers being loaded now there are workarounds to doing this like I could go ahead and duplicate duplicate duplicate okay now we got six of them here and I could go in and do a bit of math I could break out my calculator I could go to the advance to custom and then I could put in something like 33% or it actually be like 32 point something depending on how much of the gap there is and if I copy this style and if I paste a style paste it paste a style paste a style again oops and then if I go to my outer container over here I go ahead and wrap it up well you see now I got to make it a bit smaller maybe 31 and okay well let me do this one more time just so you can get the visual to help out with it okay now you can see I could create something like that all in a single container but right now there's inconsistencies in here I'm going to still have to break out the calculator it's going to be some weird numbers like 31.0 289% to get everything right forget about all that now let's go ahead and exit this and let me show you how we could do this so much quicker with grid so I'm going to select right here do I'm going to first just select this first one here I'm going to give it some space again just so we got some breathing room and I'm going to add in the icon box again over here okay cool let me go ahead and duplicate it and I'm going to do that a few more times to get the same six that we had before now we got all six elements here I'm going to go over to the container to the grid container over to my layout and then from right here we got full control over it so your columns are going to be everything going horizontally and our rows are going to be vertically for columns I'm going to set this to a three FR the FR stands for fraction and that's well you got you know three fractions so that way is divided in three and then inside rows we could do the same thing we could create more rows now if I create more doesn't going to add more stuff in it but it is going to create more boxes that we could see here to fit in our content to achieve the same thing that I was trying to do with flex both all those calculations I'm just going to set this at three columns and two rows and then from here I could go to my gaps let me go over here to rim and look how quick and easy that is and this is the advantage right here of grids with grid layouts and certain grid layouts we could do things much faster much easier and most importantly with clean code output the less dormant less dibs that we have inside our code is always going to be best now let me walk you around some of these settings here so we could you know show or hide the grid outline I like to see it because it does help to have that visual over here these are what you're going to be working with most your columns and your rows and then also your gaps now by default it comes on FR which is a fraction we could change that though and put it in manually this allows us to use grid CSS rules right inside element or so you can see here we got one of our one of our one of our I could go ahead and put in another one of our or another fraction and now we got four fractions here I could also change it up let's say I want to have more spacing actually do you know what let me delete this right here I'm going to delete a few of these clean up the space so I think we got an idea of how a multi-row grid looks like let's add something in here I'm going to put an image in here and let me delete this let's say we want to create a certain layout where we have like small bit of content right here small bit of content right here but we want our image to be bigger right here to take up more space I could go over here to the outer container and then in here I'm going to change it to 1 FR to 2 FR and then 1 FR so it's one fraction two fraction one fraction and you can see how this works mathematically all together this equals four fractions this one is taken two which is 50% so this is going to take 50% of the space now anybody new to CSS grid and looking at this one FR to FR I know that could seem a bit confusing you know Elementor did do a good job at keeping this very simplified for very simple grids and this is good for a simple grid layout but grid layouts can get a whole lot more complex and it is something that I think is worthwhile for anybody to learn that wants to be like you know a professional web developer CSS grid it takes a little bit to wrap your head around but once you do it becomes super super useful in creating layouts and improving your whole workflow for now this is a good start to get the basics and look at I could already see like this working in many different situations like if I really wanted to you know dig in and have some fun like I would go in here and I could make this something like let me see here I'm going to pencil this in I want to make this 50% so I'm going to put two FR right here and then you know I could center this up a bit style these up and I can make you know nice section right here and then this just opens up more room for creativity and more options as well now before trying to create CSS grids using CSS and Elementor took quite a bit more code but I have been playing around with it I've discovered it's a lot easier now I do have that coming up in an upcoming video I'm working on a project where I'm putting together all these different situations of different grid layouts and I want to get a bunch of them together and share with all of you make sure to subscribe that way you know you get you get notified when that comes out because that's all just going to be free and I love this stuff I love geeking out over it okay so when to use CSS grid instead of CSS flex because as you can see a lot of what we're doing here you can do it with both well I would say the number one reason to use CSS grid over CSS flex is in a situation where you would have to use inner containers if you could avoid using inner containers by using CSS grid then grid is a way to go now we've got a chance to see the basics but I do have something in the works right now I'm creating the next tutorial which is going to show a lot of the more complicated uses to create some really different types of grids and layouts I'm putting a lot of stuff together I'm going to be giving away the CSS and all that stuff so make sure to subscribe and then also if you have any questions drop them inside the comments I'd be happy to help out well that's it for this video I'll be back again soon with another one thank you for watching