Elementor Grid Containers - First Look & Easy To Get Started

[@Havsland]

When Elementor rolled out Flex, it required a completely different way of thinking, so when you suddenly had to deal with Grid as well, I was a bit overwhelmed. But then it's dope that there are content creators like Lytbox who explain in a simple way, so that you want to try it out. Thanks!

[@LytboxStudio]

I’m so glad to hear this!

[@barryfinnis2067]

I have just discovered you. You don't talk too fast, you explain each part clearly and that is so refreshing. Thank you

[@LytboxStudio]

Thank you so much for that! 🙏

[@YesGoDo]

Thanks!

[@LytboxStudio]

@YesGoDo a big thanks for the Super thanks! 🙏

[@hdustinowens]

Thanks for sharing, Jeff! Looking forward to the next video for more advanced uses.

[@LytboxStudio]

Thanks! I’ll get it out asap

[@webtappers7863]

Thanks Jeff, learned a few tips & tricks through your tutorial for Grids!

[@LytboxStudio]

That’s great!!!

[@clementyo4526]

Looking forward more advance tutorial about Grid container, Jef ^^ Great tutorial

[@LytboxStudio]

Thanks Clement!

[@antoniogarcia9271]

Jeff = Cool Peoples!! Thank you brother.

[@LytboxStudio]

Cheers 😎

[@jabeztadesse]

Grid is awesome, I'm gonna start using it right now

[@dimitrispappas2411]

You just earned a new subscriber.

[@Aziz-Ahmed-UK]

Can hardly wait for the next one. Thanks

[@LytboxStudio]

It’s in the works!

[@chideradigitalfreak]

Awesome man, thank you. I've been trying to understand this for quite some time.

[@LytboxStudio]

So glad to hear!

[@devtanvir]

Elementor Grid is dope!

[@LytboxStudio]

Agreed 😎

[@franktielemans6624]

4:55 I have a tutorial on my channel (wrap & gap) on how you can do that pixelperfect with the use of the custom units selector and a CSS calc function. At this stage I find grid very limited, we need grid-item properties like grid-row, grid-column, span,...

[@LytboxStudio]

It is limiting and I wish there was grid items like in 🧱. I got some workarounds coming up 😉 And feel free to share a link to your video. I’d like to check it out and other here can learn more. Cheers!

[@clevermissfox]

I have requested built-in extended features for grid. Like for instance you have to use custom css to take advantage of alot, if not most, of the amazing capabilities css grid supports. You cant make a container span x cols or rows; you cant use subgrid; you cant use grid-template-areas; you cant use any of the amazing keywords(eg auto-fit, auto-fill, fit-content() function, minmax etc) without knowing about it already and using custom css. Not sure why not, esp for things like span 2 or grid-column: 1/-1; Im sure many elementor users that dont know css would love some of these options, qnd i would like to be able to use the ui instead of navigating to the last page and scrolling all the down and dealing with their bloated class names and scary selectors haha Sorry rant over and this may not be the appropriate place for this comment- the creator is a great teacher and is just educating and sharing the features. Obviously not his fault these arent available but on the offchanve someone reads this that didnt know these things were available and could research it more or submit feedback of their own for features they would like to see added!

[@LytboxStudio]

I feel the same. To properly use grid, there needs to be a way to use span. Not sure if we'll see it in Elementor but would be awesome if they added this in the future

[@bobruis4073]

I find it extremely good that they added GRID not too long after the flexbox. Both of them are like 2 superpowers combined. Only issue I stil have with Elementor is the amount of HTML (DOM) there is. With all these new features the builder gets pretty darn slow if you have flex, grid combined with carrousel and loops. I hope they will optimize it more and more... because Webflow is getting extremely good too

[@LytboxStudio]

I feel you. They keep trying to reduce bloat and containers helps. But it’s still a lot. For those of us that want the cleanest dom Bricks is something to check out.

[@nubenegra809]

love it man! quick question... should we be using (rem) for containers instead of (percent)? ... asking just because you seem to be using it that way. Thanks in advance.

[@LytboxStudio]

Great question. When it comes to padding in a container, I’d go with REM. It’s accessible and has more control with the layout. That’s my personal preference but it’s still not wrong or bad to use % as it works for others. The main thing is being consistent and using a system that works for you.

[@nubenegra809]

@@LytboxStudio thanks man for your reply! and thanks for your tuts! i am 100% sure i am better because of them 🤙

[@Pabloh-e6o]

Many thanks, excellent work. I wanted to ask you today how Loop Builder allows you to place products and create a carousel of these elements with Loop Grid, however it is not possible to place the Image Flipping effect (by hovering the image changes to what you have as a gallery of this product in automatic form, it is important that it is from the product gallery and not from the media library), if you could help me with how to do it in some way I would be very grateful. Your help is very valuable, very grateful

[@RicksCreativeCo]

Yo, thanks for the great info. Would this grid work when creating a bento box layout?

[@sucd218]

this is great! thks man

[@MFG2738]

is it possible to have a shape divider going vertically ? Like a tilt between columns?

[@LytboxStudio]

I'm sure it's possible but need to know how this will look and work before finding the right solution

[@ambikachand5784]

Cool

[@BalloonSchool]

What I like on your videos is... that you are more "careful" about new features. LESS DIVS :) - I keep this in mind :P

[@LytboxStudio]

Thanks! 🙏

[@sephambrosio2929]

Hello sir jeffrey! I was just wondering if INNER SECTIONS will be discontinued in the future? If so, what will happen to all sites that used INNER SECTIONS? Thanks!

[@dronefishing]

Thanks for the overview Jeff! Did you happen to view sources in your testing to see if grid actually reduces the code bloat?

[@LytboxStudio]

I did but only when using a single element like icon box and avoid using inner containers. If you want to do more, you’ll need to still add containers in the cells and then it’s pretty much the same dom

[@dronefishing]

@@LytboxStudio Ok, thanks again. I appreciate the great vids you put out, they've helped me on a few occasions. Cheers!

[@MotivatingMarketingTech]

CSS Grid in itself is amazing however the Elementor implementation is missing the ability to set the number of rows and columns you want the a grid cell to be. Additionally, how to set the first cell to start on the third row for a certain breakpoint. I have been using grid in Elementor for quite a while however I prefer to do it manually by creating a container div, dragging in the items that I wnat to be part of the grid as a single stack and then by defining the outer div's inner wrapper as the grid, I can have full CSS Grid control over the inner item I dragged in and by writing my own code, also have total control over how it works. It would be great if they added in these features eventually as to me, it is still kinda half finsihed.

[@SajidAli2]

How did you load this given file on elementor, if using new page elementor then adding tempete is giving error

[@Nayan_Dutta]

💚💚💚💚💚💚💚💚💚💚💚💚

[@stanceworks7995]

my heading blocks dont want to change size using the slider under typography-do you know why?

[@LytboxStudio]

Could be a bug in the editor. Try manually inputting the size instead of using the slider and even if it doesn’t change, save and look in the front end to see if it updated. Sometimes this can be caused by caching in the browser, other plugins conflicting, or a bug in Elementor.

[@comlog7537]

4:47 when I press wrap all icon boxes go vertical one below the other can someone help me? in mobile and tablet resolutions it works fine but in tablet landscape and above its all vertical

[@LytboxStudio]

Don't wrap it. I was only showing what happens when wrapping. With grid we don't need to wrap

[@YesGoDo]

ACTIVATE GRID (Thing seem to have changed> it doesnt show in features section , so my tech chat stated > "You can just activate the container since it will automatically activate the Grid, Once the container is activated you will be able to see this option on editor. Container Layout -> Flexbox Container & Grid option"

[@LytboxStudio]

Thanks for sharing. Indeed, the grid is automatically activated. We’re seeing more new features go from the ‘Features’ page to being automatically activated.

[@groundpets5101]

Interesting

[@rightpadding]

If only Grid in Bricks is this visual. haha

[@groundpets5101]

Can't you just make the page then put all in container once your done?

[@learnwithnorwebs]

I want to point out something. Using the container, after you have added 33% to the image box widgets... Just make the size grow for all of them. What did will do is make all of them take up any available space, equally. You don't need to do so much intricate maths to get the exact width numbers.

[@clevermissfox]

You can't just use 33% because the gap value has to be accounted for too. So if you have 3 containers at 33% , and a gap of 1rem , then you have 2rem of gap to account for, then when it wraps or auto-fits (to one column for mobile) there's no inline gap to account for. That's why the FR unit is so beautiful, it takes the available space This was an initial look at the grid widget so I think he was just clicking through the widths to show that specifically and so he chose 31%, a number he knew would account for whatever gap had been set and wouldn't overflow.

[@wellnix53]

Grid containers use more css code than the other methods. CSS coding has evolved twice as fast as other html coding so why not ride the wave?

[@LytboxStudio]

The css size difference is so micro there won’t be any real world difference noticed. But on the other hand, using grid at times can have a noticeable difference in building a layout. Can’t go wrong with using flex and grid when using in the right situations.

[@DamirRegoc-c7z]

Why does it, when I go to "Advanced", and try to change the HIGHT, it changes the WIDTH? I feel I have 18 way to change the widh, and not single one to change the hight. I placed 4 elements into one box: logo, button, and 2 for text. One of the texts is long, so now each element got stretched to that same size. So now I have this huuuuge unnecessary space under my logo and the button. It look ridiculous.

[@LytboxStudio]

I left a comment on your other comment. I hope you figure it out. I’ve been there being frustrated trying to figure things out too. Keep learning though, it will start to make sense.

[@flekz384]

But you can only use one widget per container, right? That will limit the creativity.

[@marszu-com]

You can place a container in a grid cell with any number of widgets inside.

[@LytboxStudio]

You can add containers in the grid cell and control the outer with grid settings.

[@windyhan7597]

hey man you help me

[@LytboxStudio]

Awesome! 😎

[@chadgarber]

Why even use flex containers? They are so confusing!

[@LytboxStudio]

Once you learn them you’ll love them! They make building a layout much more efficient and they minimize the bloat. There’s a learning curve but well worth it💪

[@foofourtyone]

Problem is: you did not show the real use case of grid, working with dynamic data, for example a blog article overview situation, where you pull in all articles and put them into that grid. Is that even possible with Elementor?

[@LytboxStudio]

This is a first look when the grids came out and still in beta. I can't show what didn't exist at the time. I'll have more updated grids though 😉

[@foofourtyone]

@@LytboxStudio Yeah, that's what I have guessed. Pretty useless and unmaintainable if you can't use it with dynamic data.

[@LytboxStudio]

​@foofourtyone not true. Before getting negative try looking at how it can help. For example, this makes creating layouts easier and more manageable. It's improved my workflow. There's always pros and cons, my suggestion is instead of focusing on the cons and writing something off, review the pros and see how it can help.

[@LytboxStudio]

BTW, the Loop grid with all the dynamic data is using grid layouts. You have the dynamic data option and the new layout option.

[@damirregoc8111]

Why is Elementor so clunky and unnecessarily complicated. Why can't they just make things stretchable and movable by click and drag, instead of needing adons for everything. I have to watch 2 hours of videos to figure out how to change sizes of boxs within the grid. I still didn't find it, lol. One guy records 20 minutes video about just changing the width. That's literally insane, that I need school to do something so simple.

[@LytboxStudio]

I understand your frustration but please understand, it took me years to learn and understand web design and development. It’s something that takes time and dedication to learn and understand. The tutorials help out but we also need to go in, take the time and learn the tools like Elementor. It’s doesn’t help getting frustrated and blaming Elementor or the people taking time to create videos and teach. Keep learning and everything you mentioned will start to make sense.

[@damirregoc8111]

@@LytboxStudio I wasn't blaming him. I'm saying it's crazy that there needs to exist a 20 minute video for such a simple thing. I know it takes time to learn. I'm not here since yesterday. I've built 100s of websites on Shopify, in Wix, ClickFunnels... That's why I have to disagree with you on that one thing: I absolutely will blame Elementor for being the way it is. I would never use it, if my client doesn't already have a website on it, and insists on staying loyal. Now, I will learn it, since I have to. But it is clunky, and needlessly convoluted.

[@ChuppyProduction]

so ,,, in conclusion grids are tables

[@LytboxStudio]

I can see that analogy but I look at them more as a layout tool that makes structuring blocks and responsive so much easier.

[@kwdigitalsolutionswebsited3365]

would have been nice to see how it works on mobile

[@LytboxStudio]

I do show and it's quite simple. On mobile, change the number of fractions to 1 or 2 fr.