All New Advanced Grid Containers For Elementor (with a free template 🎁)

[@LytboxStudio]

Quick pro tip: You can use the Icon Box or Image Box widgets instead of the inner containers, they do not need to be in containers and will make the code even cleaner (I forgot to mention in the video)

[@jimispears]

Thanks!

[@LytboxStudio]

Hey Jimi a huge thanks for the super thanks!🙏

[@LytboxStudio]

And welcome to the Pro Academy 😎

[@jerry-suhrstedt]

Bro, your tutorials are "on-point"... good job. Been designing on WordPress over 16 years... still learning.

[@LytboxStudio]

Thanks! 🙏

[@tuxjunkie]

I've been at this for 2 months, and FINALLY, someone who can explain in a way that actually makes sense to me. Damn...thank you man! I'll be coming back for more gold.

[@MariaRina-km9vg]

Great content, a huge amount of work in the background, a great added value coupled with a very practical proposal thanks to the template that goes in the same direction: it's valuable for training/improvement. This new content proposal is very appreciable, you deserve firstly to be congratulated and especially a big thank you. You've "earned" a new subscriber to your newsletter 😊 Hats off for your content proposal and for your generosity

[@LytboxStudio]

Thank you so much Maria, I really appreciate this!

[@jaseyarm]

You're very generous with your sharing mate 🙏

[@LytboxStudio]

Thanks! 🙏

[@mikecharles6767]

Jeffrey, you blow me away! Thank you for your teaching and your ocd lol. Mike in the UK

[@LytboxStudio]

Thanks Mike!!!

[@mikecharles6767]

Please give me a price for a course on eliminator loop grid? I cannot afford monthly. Mike UK@@LytboxStudio

[@antonichristian5845]

Really nice Jeffrey, thanks. Hopefully Elementor will continue to work on Grid to include at least row and column span to make these kinds of layouts much easier.

[@LytboxStudio]

I totally agree! I can see this working with a new span setting in the inner containers. Let’s see what El does, they’ve been pretty good at updating their new features lately.

[@odhiambo0]

I am loving these tutorials. Very informative.

[@Aziz-Ahmed-UK]

Excellent work Jeffrey and thank you so much for this pre-built grid template, you are very generous person.

[@LytboxStudio]

Thank you and I’m so glad to hear it’s helping!

[@1LifeHypnotherapy]

Great tutorial many thanks for this 😊

[@LytboxStudio]

Glad it was helpful!

[@xAnangelx]

I have NEVER been able to align things right with the flexers...EVER! Your awesome brother thanks 4 all the hard work!

[@shaunazar]

This is great, thanks for putting this video together and providing the templates.

[@LytboxStudio]

You got it and thank you!

[@systechcwb826]

I like your explanation. Congratulations.. From Brazil

[@LytboxStudio]

Awesome thanks and much ❤️ to Brazil 🇧🇷

[@webchimpnl]

@LytboxStudio If you just add a grid widget with some flex container (full with). Than just add "selector { grid-row-end: span 2; } (or grid-column-end: span 2) on the block you want to span over multiple rows or columns. That is much easier in my opinion. What do you think?

[@justme55216]

Thank you, this is much more easy

[@fredo0630]

Thank you so much! Very useful tutorial!

[@CharlesBirdm]

Love the video and your content, Question: if I have a legacy elementor site that doesn't use flexbox/grids, what is the best way to convert them to flexbox/grids? One-by-one or use Elementor to auto do it and inspect?

[@LytboxStudio]

Thanks! Best way is 1 section at a time. Most will be seamless, some will take a bit of tweaking to fix.

[@ruthgwerder825]

Thank you very much for this video and the great template.

[@LytboxStudio]

Thanks you🙏

[@PedroMPerpetuo]

that looks good. is there any chance that we can do this for a mega menu? I m trying to figure oiut a way to build a mega menu as lightweight as possible (minimal DOM) .. I just sense that the footer and menus build with Elementor consume a lot of ressources... I wish there were more tutorials like this that would focus on performance...thanks for your work!

[@LytboxStudio]

If you’re trying to minimize DOM I wouldn’t use Elementor’s mega menu, it’s crazy bloated with divs and spans and not good for SEO. Better to code one if you can.

[@Moka-Ez1T]

yooo mate u r the best

[@jabeztadesse]

Nice Video + Free templates

[@LytboxStudio]

Thanks!

[@4Mulator]

Thank. you Jeffrey, any idea how you can do a masonry grid ? or is that not possible with this grid system in Elementor?

[@afrinsanjidaonly]

Just Awesome!! Thank you.

[@bbontubecentral1]

Thank you for your time to do these tutorials. I would like to see a tutorial with more responsive where you have the desktop with several horizontal containers that are nested and then in the tablet mode, take some of the nested items and be able to mix up the order. Possibly even take an element from one nested container to another nested container in a different order. For example on desktop: left side, container 1: header, text block, button. Right column container 2 image carousel , text block under. Container 3 under container 2 but have a group of text blocks. I had this design, but when I switched to tablet, I needed to move the button to the bottom, the image carousel to the top, the left column 1 header with the left column text block under the header. I tried numbering order, but that didn’t work either. I finally gave up. I’m new to Elementor and I’m afraid I have been trying force the design in ways Elementor cannot handle.

[@NooNaLaluna]

Awesome 🎉 thanks 💗

[@LytboxStudio]

You’re very welcome 😉

[@truthseeker318]

Thanks for the video! I joined your new letter. However I could not get the templates to import in my Wordpress site. Not sure why..

[@LytboxStudio]

Thanks for joining! Did you get a confirmation email?

[@truthseeker318]

@@LytboxStudio Yes, it's working now. Do you build custom grids?

[@JACQUELINE5832]

I would love to see how to use the grid layout with a side bar on the right

[@LytboxStudio]

I might need to update the template to add a sidebar. Good idea 😉

[@vid4ia583]

Great stuff just subscribed. Question: Can this same info and template be use with the free, basic Elementor program?

[@emadpoursina]

Nice Trick

[@rswebmarketing]

Is it possible to achieve that without custom css ? I am pretty sure that it would be possible.

[@LytboxStudio]

Hopefully in the future if Elementor ads to their Grid Containers which is a good chance. The only way to span grid items without CSS is if Elementor adds span options for inner containers. Or you can use regular flex containers with a bunch of inner containers setting custom widths for all of them, but that’ll get messy

[@ingarnt]

When trying to open the template after importing, it says I need to add the "Post Content Widget" first, before I can edit the template?

[@sephambrosio2929]

Hello Sir Jeffrey! I have a curious question about INNER SECTIONS. Is there an update from Elementor that this feature will be discontinued because of CONTAINER'S existence? I am wondering what would happen to all sites prior to this update if INNER SECTIONS will be discontinued. I hope you'll notice and respond to this inquiry. Thank you so much!

[@srirangarajnc]

How to import the template you provided? I got an error when imported to elementor library... please help!

[@LytboxStudio]

Are you using Elementor Pro version?

[@גלנחשון-ד1ל]

HI, if I want to use the 12-8-4 grids fro desktop/tablet/phone - is that possible? I tried media queries but the gaps of my initial 12-column gird remain and as a result making the width shorter

[@LytboxStudio]

You can do this without media queries. Adjust the gaps in column and mobile directly in the Elementor settings in the outer container

[@firewallk1993]

you are amazing

[@phkoon]

*Edit:* After hours of testing, I found out the misalignment we only present in the editor due to how the grid outlines and the "plus" container placeholder are calculated. *It DOES work fine with more than 12 fr columns/rows.* Thanks anyways and I hope it might be helpful for anyone. *Original comment:* Hello there, Jeffrey! Man, I'm struggling a lot trying to accomplish a 16-column layout. Here in my end, the grid container only supports up to 12 columns! Until 12 columns, everything is perfectly aligned, the spans reach fine and all is perfect; but as soon a number higher than 12 is set, the columns widths get crazy and it misaligns. It's driving me nuts, as I went for the trial version of Bricks to see if I'm nuts and it worked. Can you PLEASE confirm we can't have a perfect grid container set with more than 12 columns at 1fr? p.s.: for the record, I've set 20px gaps, but also tested with 0 gaps Thanks in advance!

[@graphicdesigns9311]

It didnt work in my elementor... turned on the Grid setting etc...

[@LytboxStudio]

Go to the blog post in the description and use the comments there for support. Send a loom video and give more details. Myself or a team member can help you figure why it’s not working on your end.

[@SuburbanPhilosophy]

briliant. Yeah. You cannot achive this with flex container.

[@LytboxStudio]

Not without a messy inner container Frankenstein of a layout 😉

[@lakinen_69]

Ok, but what's the advantage of this since there are so many inner containers in this free template? I thought the point of this video and tutorial in general is to avoid that, and minimize the use of inner containers via CSS grid.

[@LytboxStudio]

The advantage is being able to build creative and bento style grids. There’s no way to avoid using inner containers if you want to span grid items and create bento style grids with Elementor’s grid unfortunately. I feel you, I’m always trying to reduce doom as much as possible and I hope Elementor comes up with a better solution for adding grid items to span.

[@kirk59]

Always great information but sometimes in your enthusiasm it skips over the important stuff. (The stuff that si going to catch you ourt) An example is that you started with an overview of the container grid and extolled its ease of use. I was looking forward to part 2 of using the grid and getting a better understanding but it seems that it was easier to just provide templates rather than to cover the learning part of the grid. I was trying to move from flex-box to the grid after seeing your first video but soon came into an issue which was not really explained and that was when I set up a grid and started to drag a heading then some text to go below the heading it does not work. There is a reason but this is not explained. You are not the only one who has missed these things out. In fact there seems to be the same content where they spend equal time to explain the difference between the flex-box (Which has been considerably covered most everywhere on similar channels. I am an experienced educator albeit in other areas. What I would do differently? I would suggest that you explain first how to use the grid. (You can explain the difference afterwards between flex-box and the grid)) The eliminates the slowing of the learning process where people are still thinking about what you have just covered. rather than the new informationIt which is more important for them to focus on. As this is the new information you wish to impart rather than the past information. If you did wish to cover something about the differences in the flex-box then you could demonstrate not just the layout options but how you would use it. So you could show that before we used to drag a heading, text and button into a flex-box container but if you try to do this in a grid it just moves to the next box. (flow) The beauty of this is that you have already given a fundamental heads up on how this may not work as they had worked before using flex-box despite the similarities between the flex-box and the grid. I regard you are highly experienced educator and you usually put out different content to others even if it is the same subject. If you were to revisit this subject then I would suggest a tutorial in converting a template using the grid instead of the flex-box. You could proved a download to a template to work along with. I appreciate that you have a busy schedule so content has to come out quick and so things need ot be left out. Thank you.

[@LytboxStudio]

Thanks for the suggestions. The thing about web development is it's all about problem solving and figuring things out. It's the best way to learn. Content like this helps to save time and guide in the right direction but could never be a 1 video fits all solution. A lot of the times it takes banging your head against the wall trying to figure something out, but that's the process and how we learn web dev.