Elementor CSS Grid vs Bricks Builder CSS Grid

now Elemental yes they released the beta version of 3.13 and one key feature that caught my attention is the ability now to start working with CSS grid sure we've had a flexbox for a little while with the containers but now CSS grid opens up additional options so we're going to delve into that a little bit and see what it has included in this early release and some of the things that I think are missing we're also going to take a look at how it Stacks up compared to the brix's version of CSS grid now they're very very different tools very different approaches so I'm going to show you how they kind of differ now first up you do need to enable this feature to access that as we always do you simply come over into Elemental into settings and inside there you go over to features and scroll through and you'll see there's a new option for grid container make sure that's active you also need to make sure the flexbox container active as well they're kind of related to each other this is an alpha version inside a Beta release or Beta release if you're from the US just so you don't jump and Lynch me just saying okay so once that's been enabled in this beta version we now have access to that option so first of all let me just cover off what we have set up I've created a container which is your parent container and inside there we have four containers each one of those simply contains a heading element and that's where we get the one two three four and you can see each one of these is color coded so you can see what's going on okay so let's go back to our parent container if we come on to the left hand side you'll see we get a new Option underneath the layout options for this and it says container layout is set to flexbox and underneath all the normal flexbox options however this new Option gives us the ability to change over to grids if we select that you can see this now puts us into a two row two column grid layout and everything is laid out equally now if you come over underneath where we've got this switched over to grids you'll see now we have some new options you can see we have grid outlines and this will show us basically just an outline version of the grid boxes so at the moment we've got a two column two row grid let's change the columns over to three and you see now what happens is it all compensates for that change in columns and rows so we take this to be for example one row you can see nothing happens because we have this set of three colors we have to have that second row again if we set this to be three you can see even though we can visually see these kind of placeholders using the grid show option nothing's actually inside there however if we change this over now to columns and set this to be one you can see that now fills everything out so so far all pretty basic and you're probably thinking well it's not really something you couldn't do by using the flexbox model and you'd be right you pretty much could but there's more flexibility in here so I set these back to be two by two just like Noah and the arc now you'll notice that we have the option to control the units that are being used so you can see it says FR which is basically just a fraction a fraction of the overall size of this particular container and everything is broken up equally inside there you can if you want to change this over to be option for custom and then you can manually type in what you want as opposed to using those FR kind of pre-default values so we'll come back to that in a moment so set that back to be the standard FR now underneath you'll see you've got row and column gaps so this allows you to control the spacing in between your rows and your columns again very similar to the kinds of things you could do inside flexbox you can see we can choose between pixels M's Rams and so on and you can even use these sort of the new option for creating custom values inside you so for example let's keep it to the pixel value or let's say we want to put a hundred and you can see that now gives us a hundred for the horizontal and the vertical Columns of the gaps however if you don't want to link those together you can just click the little chain link and then you can adjust these so we'll say well I'll do something like this so we now have 100 pixel out between the columns and a 20 pixel gap between the rows all pretty simple and straightforward you've got controller then your auto flow and your justification of your items inside there now I'm controlling everything inside you based upon the containers inside anyway so I'm not going to worry too much about those they're not really going to do much in this example okay so let's go back to that option where we can set up the units of measurement for the columns and the rows now currently you can see when we make changes everything is basically equal as we increase or decrease the size of each one of these columns each one of these sort of cells will shape is exactly the same and you don't always want that and this is where the flexibility of using something like the CSS grid opens up more possibilities for creating these more unique layouts so for example let's change this now for the columns we'll switch this over to be the option for custom and we're going to use the FR rule in other words instead of just using FR for this drop down we're going to manually insert it so what we can do is we can say we want the first item here to be 2fr in other words take up two spaces on the screen so we do two fr and you see that now takes up the space but nothing else is kind of happening because we haven't set any other rules so now if we just do one FR you can see now what happens is the box one takes up two column widths whereas box two takes up a single column width so this is where you start to get into that flexibility of creating more customized layouts now let's go to the row side of things let's do the same thing inside there let's change this over to custom values and what we can do now is we can control the actual size of the rows so let's say we want the first row to be 500 pixels let me want the second row to be 200 pixels we can pop those in and you can see now that controls the size as this so we kind of mix in a match in the column using the FR units and we're using the pixel values then for the height but you can mix and match if you want to so there's a lot more you can do this I don't know into too much detail because I think it's going to be too much in the way of sort of like explaining how CSS grid works this is more a case of just demonstrating how you can start to interact with it using this beta version okay so we could if we wanted to change and get rid of these FRS and we could use values so for example in say 2fr for the first one and then we're going to say 300 pixels for the second one so that now is 300 pixels wide and again if we change this over to something like 200 you'll see that changes 100 so you can see these are basically mixing and matching various different types of values and this is stuck we start to kind of get into the benefits of using something like CSS grid now this is still relatively early on this is the first sort of alpha release of this feature inside Elementor so there are still some limitations you can get around them by writing custom CSS code and again like I say check out imran's second video because he kind of covers some of this inside there but if you don't want to and I think this is where a lot of people would be more happy this is the kind of happy places where they don't have to kind of get in start writing custom CSS code the fact you can actually use these values inside you is pretty useful and pretty simple and straightforward but you do need to understand how CSS grid actually works so that's the basics of how you can do it inside you there are like say some still limitations inside the editor itself however let's just jump over into the version inside bricks Builder and you can see I've created a similar kind of layout let's select our container but you'll notice these are all still numbered sequentially but they're not being displayed sequentially so this is where the benefit of using sort of CSS grid really comes in you can change not only the size and the space and all those kinds of things you can also change where inside the grid each different element is actually positioned and this is where I think it makes it a little bit easier using bricks Builders to do this but you do still need to have a pretty solid understanding of how CSS grid works and I will put a link to the documentation to working with CSS grid inside Brix builder in the description below there's a lot of really good examples inside there of how to get started using it I would recommend taking a read of that if you want to delve into this using bricks Builder let's come back over and let's take a look at what options we have once you change this over from Flex which you can see is the standard kind of layout and we go over to Grid in the same way that it changes inside Elemental We Now open up the options inside bricks Builder to do what we've just seen and a little bit more but inside the editor you can see that we've got the grid template rows we've set those to be 300 and 600 pixels high so they're kind of explicit values but most of the Magic in this layout isn't going on at this level it's actually going on at the Block Level now if we take a quick look at the way that I've set things up here this works a little different to the way you would inside Elementor so let me just quickly go over the section is the parent container if you will when you take a look at something like Elementor and inside there we've got a container which is the nested in a container which is said to be the sort of width of the page the section itself is full width and inside there we've got four blocks all of these are basically containers just they're interacted with and labeled slightly differently in bricks Builders if you're not a bricks Builder user this might be a little confusing but it does make a lot of sense once you get into it so if we select one of the blocks so come over to the left hand side now you see we've got these grid item options and there are two options inside your grid column and grid row and this allows you to control the row and column position of this specific Block Level element in this example it's the first block level element and as you can see it's just taking up all three rows and only the First Column whereas if we take a look at the third one which is this third block you can see this is taking up two column widths and this is in the first position but it's a kind of stacking orders all this kind of stuff it all kind of gets a bit confusing if you don't understand it but what I want to kind of demonstrate to you is that you have more control currently inside bricks Builder that allows you to not only control the sort of width and the height but also the position and all these other kind of good things you can do with CSS grid this is a lesson in itself and to be honest CSS grid once you get your head around it is very flexible and there's times where this makes a lot more sense over flexbox and other times with flexbox makes more sense over CSS grid but hopefully what this has demonstrated in a kind of a bit of a mishmashy kind of way is it's good to see that Elemental are now bringing in these more advanced features that a lot of people have been crying out for for a very long time so kudos for doing that so let me wrap up my thoughts and feelings about this first release of the CSS Grid in Elementor and some of the things that I kind of feel are hampering moving forward with Elementor first of all kudos for actually listening to people it might have taken a long time but it's nice to see that CSS grid and flexbox now are being included even though this is still an alpha and flexbox is still in beta it's good to see that we do actually start to have these functions and it's being taken on board it would be nice if this was a little bit more obvious that you could actually do some of these things because my first impression based upon imran's first video and my testing was that you didn't have control over these FR units and so on so that was a mistake on my part I know imrise released a second video to cover some of the other things that he didn't cover in his first video so the links are those in the description below and thanks to some of the people over on the actual Facebook group to point me in the right direction to say actually Paul you can do these things so it's good you can the only downside for me is it's kind of hidden away and it's not really sort of a front and center thing so nice to have these sliders but that really hides away the power of CSS grid and kind of makes it semi semi-useless having it done that way however all of that is kind of by the by at this point in time because all these things are being held back by the container the flexbox container still being a Beta release inside experimental features now I know a lot of people are actually using it this and they're comfortable using it but my recommendation is always when you've got a Beta release of something as key and important as this I wouldn't use this in production sites because the reality of it is if something gets changed on a kind of fundamental low level all of your hard work could be undone and you have to go and do a lot of remedial work to go and fix things especially annoying if you're doing it on a client's site so at some point it would be nice to get the container out of the experimental phase out of beta phase into a final release and then all these other things that are kind of being built up behind it like a dam would actually come out and we'd be able to have things like these nested containers or these nested kind of features for accordions and tabs and so on we could then get the CSS grid and all the other things that are kind of being held back by the container and the flexbox model That's my kind of frustration I hope this is something that they will teach as a priority and push it forward get the feature out just just go come on please element or just bloody do it okay so that's my thoughts but as always I would welcome your thoughts and opinions down in the comment section down below as always all applicable links are in the description my name is Paul C this is WP tats and until next time take care [Music] thank you

Channel: WPTuts

Views: 7,880

Keywords: WPTuts, Elementor CSS Grid, Elementor, Elementor beta, Elementor new features, Elementor Pro, Elementor first look

Id: 5T0pePAumlI

Length: 13min 3sec (783 seconds)

Published: Fri Apr 21 2023