Elementor Tutorial - Flexbox vs Grid Container Layout

In today's tutorial, I am going to be discussing with you the differences between the Elementor Flexbox and Grid container layouts.
Follow me on Facebook - / thewebmonkeyonline
Visit my blog - thewebmonkeyon...
Buy Siteground Web Hosting - www.siteground...
For business inquiries, product reviews or partnerships, please send an email to [e-mail]

[@eugeniusmagic]

I speak just a little bit of english, and I understand you all the video with speed 2x set. Soooo, very nice tutorial! Thk!

[@myleslasco]

Thanks my dude! I have never been able to wrap my head around grids and how to use them, but now I see them as a great way to incorporate them with flexbox, and not to be so scared. LOL. TY!

[@stevemcirvin]

Very well done! I especially liked your explanation of Auto Flow with the numbered boxes.

[@LogologicsNl]

Thanks, this helped me understand the difference!👍

[@ArnaudHetu92]

Great video man. Those WP ''homeworks'' that you are doing are very useful. Flexboxes and grids can quickly become the gateway to hell.

[@abhisheksawant8120]

A great video to explain the concept.

[@tonybp]

Good explanation, thanks. BTW I had no idea an oasis like that one existed, pretty cool.

[@TheWebMonkey]

Glad you liked it!

[@beatrisprinz3421]

Indeed, this video guide is very helpful. Love it much. Thank you

[@TheWebMonkey]

You're very welcome!

[@mariannerady1137]

Exactly what I needed! I am running into a problem though: when I add text into the FOOTER box, the ones above jump to be very big as well, which I don't want. Can you help? Essentially I want to have a picture on the left side, right next to it two boxes: header and text underneath each other

[@ismailsaadeh6087]

Your video is great and easy to understand, but this will increase the DOM size and slow down the page's loading speed.

[@scottgroves6386]

Well done dude You recreated the Joomla versitle module layout i remembered This was rather symplistic for short explantion but i played with grid and flex and recreated my fav joomla template with H top Menu L content center R misc boxes Well bloody done .... you can create some complex sites i didnt think WP cooped with 🏆

[@aji_jaka]

thanks. it is very helpful.

[@WrestlingFan00]

Helpful video thank you!

[@PakistanCraneGroup]

Very helpful❤

[@TheWebMonkey]

Glad you think so!

[@nuresponse]

It seems that we can't build this structure with Grid alone... so the questions then becomes: Is it better to just use Flex to build this... or use a combination of Flex & Grid to build this? Why not just use Flex box for all of the nested containers? I was able to accomplish this for all screen sizes by simply: 1. Setting the menu sub-container to 25% & 2. Setting the parent container for the Main/Right to 100%. Am I missing something? Is there an inherent positive or negative to using both Flex & Grid in the same page? Does it load any extra CSS or JS files to use both? What about conflicts... I didn't see any obvious benefits in this example for using both... over just using Flex. Would love to hear your thoughts.

[@muhammadnoumanpanhwar7969]

Yeah exactly. I liked his explanation of both but he chose the wrong example to demonstrate grid. This could have been done better with just flex boxes.

[@nhatnam4627]

You say that columns or rows that do not have the same size, and one dimensional flow, then flexbox is the one to choose. But for main container containing 2 rows with different heights, you choose grid with row = 1 to make the height of first row shorter., I am confused.

[@NewtonesIndustries]

By making it one row it gets down the high of each element, that's why each element gets closer to each other. But it's a matter of taste, you could use flex going down to have mlre flexibility on the high and widht as he exllained. He is just showing you the concept of flex and grid

[@gavinwiener]

How you numbered each item in the gridbox example helped a lot. These new layouts have been doing my head in after using just sections + columns for so long. So flexbox sounds like it's the new "sections + columns" correct? It'll also be responsive and push things to new lines on mobile, etc?

[@pusuluri27]

why you didn't use col span and row span?

[@myleslasco]

Thanks!

[@ghislainemahler1880]

Hi Alex, thanks again for a great video - you are such a great teacher!!! Question: Using this grid and flex box system, do you think it is possible to create a blog page where posts are going to be at different levels? The straight columns and rows are a bit boring to me, I wonder if you would have a tip for that. Thanks!

[@TheWebMonkey]

You can pull that of by using a masonry layout. The posts element provides that feature.

[@ghislainemahler1880]

Great, thanks Alex!😊

[@ibrahimniloy2303]

Great man

[@damirregoc8111]

And how do we change the height of those columns and rows? I mean individually, every box for itself. Don't say "oh, just go to height and width", because that doesn't work.

[@ClaudiuOvidiuStoica]

Dude, this is not the right way to do it. Will increase DOM a lot

[@OlafKeller]

What do you propose then, Flexbox container only?

[@NewtonesIndustries]

He is just explaining the concept of flex and grid. He is not creating a website in this video. Read the title 👀

[@imantriatmojo5064]

Is that responsive ?

[@Digitalstar-web]

Elementor should have left it just the way it is before

[@MatthewHigley]

Do we seriously not just have the ability to drop a widget in to a grid container and span multiple columns or rows?? This process of nesting containers, inside containers, inside containers seems irritatingly convoluted. I should be able to start a text widget at column 1 and span four columns. I should be able to add another text widget to start at row 2 column 2, span two columns and two rows. I really thought Elementor would have handled this better. They've completely nerfed the power of Grid. 😵‍💫

[@OneProDesignLLC]

Your video is too long. You talked so much to explain something that could have been explained in 5 minutes. You made this more complicated and wordy that needed to be. AND NO... this is not advance but you made it more complicated than what needed it to be.

[@NewtonesIndustries]

What are you talking about, your definition of advance is not the same as everyone's. He literally explained the minimum on each step. I can tell you have never created a tutorial yourself. 🤦‍♂️

[@connellhunte]

Patience...he did a good job. Teaching is measured by understanding not by time