It's crazy how your short video easily clarified a few key questions on the use of Flexbox and CSS Grid. As usual, your videos are concise, articulate and insightful. Thanks, Jen!
You just blew my mind and its amazing to see a content creator that is over the age of 25 covering these topics. I was just laid off from a 12 year job were I did old school front end design which is now UX/UI design I am at a loss as to what to work on. I am not about the UX/UI merged talents, I dont want to do the research, testing, storyboards, and all that, so I am moving back to front end dev. And man oh man am I excited to see the changes that flexbox, grid, and css pre-processors have brought to the world of front end dev since I set out on my initial journey over a decade ago.
Really struggled to know when to use Flex vs Grid for a long time but when i started developing a CMS system of my own, flexbox really came to its use when i wanted to have a horizontal navigation with a user panel all the way to the right. With flex that was so easy to do while i used grid for the entire layout of the site.
I am so glad I stumbled on this video. Your way of explaining this gave me so much clarity on the subject. I haven't typed a code of grid but I now feel like I know better than everyone else. Thank you. Subscribed.
I think the 1D vs 2D thing is good, and is probably the simplest explanation. But you can do many 3d layouts in flex, and do many 2d layouts in grid. So I prefer to think of it as: - Flexbox is good for laying out content based on the instrinsic size of the items (flex-basis) - Grid is good for placing items on a grid with rows and columns of a set size
Thank you for sharing this useful information, I kind of knew it, but sometimes until you hear it you don't properly tidy up your mind. For example, I understand perfectly how block and inline works, but looking at your hands in this video, I realised something that I never though of: block and inline are just axes names, and this helped me to understand better other concepts such as the new contain: layout inline-size; Great content!
hi gen. love ur beautifull condensed video. i went on my phone just to write a coment on ur video. so many points in a 4 minutes vid. excellent. wish will be more like u. all the best. keep it fun.
Has anyone done the flexbox section in codecademy? Its utter bullshit! This 5 minute video has made it clearer in so many ways then spending hours trawling through CC. Thank god for TH-cam.
as far as i can tell grid is semantically shorter than flexbox, but you can create layouts with nothing but flexbox. and most sites don't require design elements like that but yeah, id probably revert to absolute or relative positioning and use margins
Can the page be the container itself? When should I use Bootstrap? What is Foundation? Can someone explain what she means by overlap? I didn't understand that part.
I think grid is a better choice.Grid already does what flexbox can do and in a much easier way. Flexbox tends to complicate things a little more. Bootstrap will probably change in the future to a grid version for sure.
This is amazing topic , I use Grid & flex-box now for about 2 months . just having problem to allow an item which placed into a grid's grid-area to float over whole page content & to show individual vertical scroll when need, to show it's content specially when I convert my website into mobile devices view. Can you make a tutorial to guide me there to solve this issue ? Note: I don't use any tools yet, just native HTML, CSS & JS self coding
Thank you very much for that awesome lecture video. I have one question / suggestion and one point that I don't aggree with it: 1. The question: I would compare CSS Grid with C# .NET WPF GUI applications and / or with the Java SE GridBagContainer Layout. We know this things for many years in classical PC programming languages as mentioned right in the sentence before. I loved those methods on layouting and I love to see it now as well in the web. That really simplifies things. I hope, we can integrate old browsers using Transpilers or PostCSS. My question is: Do you know if the CSS Grid is 1 to 1 compareable with the .NET WPF and Java SE GridBagContainer? 2. The point that I disagreee (because I did it already successfully): Indeed you are able to let overlap images using flexbox. Let's say you want to have a small image and a large on in the background. That works simply by using z-index and by using some flex properties on the CSS selectors. Another point to think about it: Is overlapping images, that next to each other not simply done by negative margins or paddings?
Got some pushback on a grid layout the other day that it's less performant than flex because it takes multiple passes to calculate everything. At what component scale is that a consideration to just _not_ use grid at all?
Thats what really what i wanted to know. Thanks. I need to experiment more because i get so many different type of psds and using grid and using basic css mixed might be good. I dont know if they work togather on IE. I hope i dont have to use shive or some html5 css3 compatibility js.
It's crazy how your short video easily clarified a few key questions on the use of Flexbox and CSS Grid. As usual, your videos are concise, articulate and insightful. Thanks, Jen!
Appreciate the explanation, on my way towards getting a career in IT through the Odin Project! Wish me luck
The way you are clarifying when to use one thing or another in CSS, makes it much more simpler, thank you , happy to found your channel
Wow , possibly the best articulation I’ve been trying to grasp and no one really explained
You just blew my mind and its amazing to see a content creator that is over the age of 25 covering these topics. I was just laid off from a 12 year job were I did old school front end design which is now UX/UI design I am at a loss as to what to work on. I am not about the UX/UI merged talents, I dont want to do the research, testing, storyboards, and all that, so I am moving back to front end dev. And man oh man am I excited to see the changes that flexbox, grid, and css pre-processors have brought to the world of front end dev since I set out on my initial journey over a decade ago.
as someone who learned CSS 10 years ago this was really helpful and cleared up some of my confusion
Really struggled to know when to use Flex vs Grid for a long time but when i started developing a CMS system of my own, flexbox really came to its use when i wanted to have a horizontal navigation with a user panel all the way to the right. With flex that was so easy to do while i used grid for the entire layout of the site.
2-D (Grid) vs 1-D(flexBox) . Sure that's a lot of information for me 4 today . Thank u so much Layout Land for sharing this up !
Its actually deeply encoded in their names - FlexBox and Grid, really good representation what they do. Great video!
I just can't stop listening to her. i'm watching every single video on this channel
You are the Carl Sagan of Web Design and Development. You illuminate often arcane concepts wonderfully. Thanks.
Very Clear and easy examples to understand. Pace of presentation was also very good. Thanks. Will now look at more of your Videos.
I like how the whole video was smooth and low key and then at the very very end she just drops into random hyperbole. Great vid.
another great channel about web development
Saw this just as I was struggling to overlay two items with absolute 😅 awesome stuff
You actually gave me a piece of info i was looking for. Thanks for saving me a lot of time.
The first video I've seen that says something about overlapping! I wouldn't have known this if I didn't watch this video, thanks!
I am so glad I stumbled on this video. Your way of explaining this gave me so much clarity on the subject. I haven't typed a code of grid but I now feel like I know better than everyone else. Thank you.
Subscribed.
I love this kind of information, thanks for share! ☺️
Finally a good explanation. Thank you!
Such a hidden gem of a channel!
Just found your channel, have only seen this video. Subscribed. You explain things beautifully and have a very soothing voice.
I think the 1D vs 2D thing is good, and is probably the simplest explanation. But you can do many 3d layouts in flex, and do many 2d layouts in grid. So I prefer to think of it as:
- Flexbox is good for laying out content based on the instrinsic size of the items (flex-basis)
- Grid is good for placing items on a grid with rows and columns of a set size
Thank you very much for bringing out this video. This cleared me my doubts i had on grid and flexbox. Subscribed and will watch rest of videos.
This cleared up a lot of questions for me. Getting ready to jump back into CSS so this helps out a ton. Thanks. Fantastic explanations.
Keep up the good work... short and straight to the point.
Wow, love this overview of layout choices! Compact yet full of info/exp!
Thank you for sharing this useful information, I kind of knew it, but sometimes until you hear it you don't properly tidy up your mind. For example, I understand perfectly how block and inline works, but looking at your hands in this video, I realised something that I never though of: block and inline are just axes names, and this helped me to understand better other concepts such as the new contain: layout inline-size; Great content!
Wow, so simple explanation ! Tks from Brazil !
This is super helpful! Especially the layout difference between Grid and frameworks like Bootstrap...that cleared up a lot of confusion for me!
This was on point short and pricise and also great explanation. Thanks for making it. 🤩
My dilemma of what to choose in which situation solved. 👍
Thank you for explaining differences and when/how one might be used or not. I found this very helpful.
Thank you for the abstract explanation.
hi gen. love ur beautifull condensed video. i went on my phone just to write a coment on ur video. so many points in a 4 minutes vid. excellent. wish will be more like u. all the best. keep it fun.
Super clear! Thanks Jen!
This answers my questions about the difference between flexbox and grid. Thank you!
Great explanation (w/visuals) of when to use CSS Grid and Flexbox. Thank you, Jen :)
Has anyone done the flexbox section in codecademy? Its utter bullshit! This 5 minute video has made it clearer in so many ways then spending hours trawling through CC. Thank god for TH-cam.
Thanks for the video and time u spent on creating this video...short and sweet...
Thank you very much for the video. I liked that the video is translated in Arabic. I hope all the videos are translated into Arabic.
Very nicely explained and presented.
as far as i can tell grid is semantically shorter than flexbox, but you can create layouts with nothing but flexbox. and most sites don't require design elements like that but yeah, id probably revert to absolute or relative positioning and use margins
Loving these videos! Thank you Jen!
Wow.... I really like how you explain things
This is amazing. Thanks for your explanation!
Thanks for the tutorial, i get the difference.
Thank you Jen. 👍
Informative and concise! Great video! Subscribed.
Amazing video, thank you for crushing my concerns over whether to still use convention CSS and CSS Grids.
Very helpful as I just started learning about those two subjects.
Thanks!
You are welcome.
Great video! You answered my question.
You are such a genius ma'am. Ty so much 🧡
nice thanks for this, you made it simple to work and know when to use them properly. Thanks again
Thank you for the insight, senpai.
Great.... Its so important and useful to understand the basics.....
Best explanation sorted content.
Clear as crystal! Thanx!!
Thank you very much for adding an Arabic translation
Wow what an interesting video and very highly detailed in which scenarios you’d want each in. Thanks a lot!
Clear explanation! New subscriber because of this video.
This is a really fantastic video, Jen. As are all the videos from Layout Land! 💯
Awesome tutorial +++++ thank you 🙂🙂
Best web explanation !!!
AMAZING EXPLANATION
I can't believe how sick people are to possibly dislike this video. You earn knowledge here you will never get it for free out there.
Nice clear explanation :)
finally this makes sense now, thank you!!
Can the page be the container itself?
When should I use Bootstrap?
What is Foundation?
Can someone explain what she means by overlap? I didn't understand that part.
Thanks madam your 2018 video helps me in 2020. :-)
this explanantion is very good. I will check your other tutorials, too. I just subscribed. Thank you!
same
Wow, so glad I found this channel!!!
Subbed :D
relly i am happy to see yours lessons
Huge Fan mam, Pure knowledge keep it up.
I think grid is a better choice.Grid already does what flexbox can do and in a much easier way. Flexbox tends to complicate things a little more. Bootstrap will probably change in the future to a grid version for sure.
This is amazing topic , I use Grid & flex-box now for about 2 months .
just having problem to allow an item which placed into a grid's grid-area to float over whole page content & to show individual vertical scroll when need, to show it's content specially when I convert my website into mobile devices view.
Can you make a tutorial to guide me there to solve this issue ?
Note: I don't use any tools yet, just native HTML, CSS & JS self coding
You are very articulate. I love that.
CSS for dummies. Thank you!
Great video's. You great at teaching and explaining in a simple manner. Thanks!!
Wonderfully explained...thankx.
Thanks from the guy from Russia.
Thank you very much for that awesome lecture video.
I have one question / suggestion and one point that I don't aggree with it:
1. The question:
I would compare CSS Grid with C# .NET WPF GUI applications and / or with the Java SE GridBagContainer Layout. We know this things for many years in classical PC programming languages as mentioned right in the sentence before. I loved those methods on layouting and I love to see it now as well in the web. That really simplifies things. I hope, we can integrate old browsers using Transpilers or PostCSS. My question is: Do you know if the CSS Grid is 1 to 1 compareable with the .NET WPF and Java SE GridBagContainer?
2. The point that I disagreee (because I did it already successfully):
Indeed you are able to let overlap images using flexbox. Let's say you want to have a small image and a large on in the background. That works simply by using z-index and by using some flex properties on the CSS selectors. Another point to think about it: Is overlapping images, that next to each other not simply done by negative margins or paddings?
Hey Jen, your explanations are great. are you planning on doing some tutorial series.
Got some pushback on a grid layout the other day that it's less performant than flex because it takes multiple passes to calculate everything. At what component scale is that a consideration to just _not_ use grid at all?
Nicely put, thanks.
This was so helpful. Now I wont try to build a whole css grid website lol
Meanwhile I'm here still using display box and percentajes... Any good tool teaching how to transition from the traditional CSS blocks to flexbox?
Very clear and informative: Thank You.
Nice video! ❤️
Thank you Jen you have helped me.
Super useful, many thanks!
So if grid can do 2 dimensional, then grid will cover what flexbox can do. If yes, then why use flexbox? We can just use grid and we are set. Is it?
CSS Grid for outter content of web and flex for inner content (inside of outter aka parents elemented i.e. sections (header, articles.. etc..)).
Great vid!
fantastic explanation :)
Great teaching was looking it.
Muito bom. Obrigado por legendar em português.
Excellent explanation. Like!
Thank you for the latest features :)
Que buen canal. Se agradece los subtítulos al Español.
Thats what really what i wanted to know. Thanks. I need to experiment more because i get so many different type of psds and using grid and using basic css mixed might be good. I dont know if they work togather on IE. I hope i dont have to use shive or some html5 css3 compatibility js.
OH God! Thank you, finally Ive found an answer! SUbscribed!