Elementor Grid Containers - First Look & Easy To Get Started

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
🌟🌟🌟 NEW ELEMENTOR DESIGN PROGRAM LAUNCH! 🚀
The Official Design with Elementor Program & Course Is Now Open 👉 lytboxacademy.com/design-with...
🟦 BECOME A LYTBOX PRO MEMBER
The Lytbox Pro Academy 👉 lytboxacademy.com/the-academy/
🟦 THE HOSTING I USE
Hostinger 👉 www.hostg.xyz/SHDX8
CloudWays 👉 www.cloudways.com/en/?id=485185
Siteground 👉 www.siteground.com/index.htm?...
Runcloud 👉 runcloud.io/
🟦 THE TOOLS I USE
Elementor Pro 👉 be.elementor.com/visit/?bta=4...
Crocoblock 👉 crocoblock.com/?ref=2021&camp...
Dynamic Content for Elementor 👉 www.dynamic.ooo/?ref=129
🟦 PERSONAL ELEMENTOR COACHING
1-On-1 Elementor Power Hour Training 👉 tidycal.com/lytbox/elementor-...
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
TIMESTAMPS:
0:00 Intro
0:45 Tutorial
10:16 When to Use Grid vs Flex
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorwordpress

[@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! 🙏

[@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

[@webtappers7863]

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

[@LytboxStudio]

That’s great!!!

[@hdustinowens]

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

[@LytboxStudio]

Thanks! I’ll get it out asap

[@Omer-user]

After all these features if elementor will add classes like bricks i think elementor will be number one from all page builders

[@LytboxStudio]

This here! Adding a class like feature similar to Bricks in Elementor is at the top of my Elementor wishlist.

[@Hassanakora]

LTD also matter for Asian

[@clementyo4526]

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

[@LytboxStudio]

Thanks Clement!

[@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!

[@ambikachand5784]

Cool

[@user-bp6ot8ug2u]

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

[@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.

[@jabeztadesse]

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

[@antoniogarcia9271]

Jeff = Cool Peoples!! Thank you brother.

[@LytboxStudio]

Cheers 😎

[@chrisrickman9464]

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

[@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 🤙

[@dimitrispappas2411]

You just earned a new subscriber.

[@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 😎

[@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! 🙏

[@Aziz-Ahmed-UK]

Can hardly wait for the next one. Thanks

[@LytboxStudio]

It’s in the works!

[@user-sg9hj6ll6s]

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.

[@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!

[@SajidAli2]

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

[@groundpets5101]

Interesting

[@Nayan_Dutta]

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

[@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!

[@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

[@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

[@marionpaolo319]

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?

[@Mia_Bella420]

Why do i have gaps between my "Grids" and how do i get rid of them? So many questions.....

[@Mia_Bella420]

Grid - Layout - Gaps - Unlink values

[@LytboxStudio]

There are default values to gaps in your site settings. Need to either change from there, set to 0, or adjust gaps in each container.

[@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.

[@windyhan7597]

hey man you help me

[@LytboxStudio]

Awesome! 😎

[@flekz384]

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

[@MarekSzulikowski]

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.

[@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.

[@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.