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!
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?
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
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.
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
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.
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.
Thank you! After watching your video, I can better understand using Flexbox and Container. I am redesigning my website and forgot how I made it in the first place😅
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!
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 🏆
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.
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. 😵💫
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.
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. 🤦♂️
Thanks, Alex, now I understand the difference between Flexbox and Grid Container
This was amazing. I am now getting everything in and this video was superb!
Thanks so much, great tutorial for a beginner!
I speak just a little bit of english, and I understand you all the video with speed 2x set. Soooo, very nice tutorial! Thk!
You are welcome!
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!
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?
You rock, thanks from southamerica! Chile! im enjoying your vids mate! Gracias
Very well done! I especially liked your explanation of Auto Flow with the numbered boxes.
why you didn't use col span and row span?
Thanks!
Thank you so much for the support
Very informative and helpful video thank you for sharing, thanks a lot from India
You are very welcome!
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
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.
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
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.
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.
Thank you! After watching your video, I can better understand using Flexbox and Container. I am redesigning my website and forgot how I made it in the first place😅
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!
You can pull that of by using a masonry layout. The posts element provides that feature.
Great, thanks Alex!😊
Great video man. Those WP ''homeworks'' that you are doing are very useful. Flexboxes and grids can quickly become the gateway to hell.
Good explanation, thanks. BTW I had no idea an oasis like that one existed, pretty cool.
Glad you liked it!
Thanks, this helped me understand the difference!👍
A great video to explain the concept.
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 🏆
Your video is great and easy to understand, but this will increase the DOM size and slow down the page's loading speed.
Hi there, thank you for the useful video.
A note: Main column must be bigger than right column. :)
Indeed, this video guide is very helpful. Love it much. Thank you
You're very welcome!
great informative video
Very helpful❤
Glad you think so!
Is that responsive ?
great video
thanks. it is very helpful.
Helpful video thank you!
Great man
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.
awesome
Dude, this is not the right way to do it. Will increase DOM a lot
What do you propose then, Flexbox container only?
He is just explaining the concept of flex and grid. He is not creating a website in this video. Read the title 👀
Elementor should have left it just the way it is before
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. 😵💫
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.
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. 🤦♂️
Patience...he did a good job. Teaching is measured by understanding not by time
Actually I find him explain it in just the right pace. I find it useful.
Thanks, Alex, now I understand the difference between Flexbox and Grid Container