HomeArticlesFlexbox vs. CSS Grid — Which is Better? Flexbox vs. CSS Grid — Which is Better? By Juan Cameron August 24, 2019 Articles, Blog 87 Comments Tags:content sizing, css, CSS Grid, css grid layout, css grid tutorial, CSS Grid vs Flexbox, developer tools, DevTools, firefox, flexbox, Flexbox vs CSS Grid, flexbox vs grid, flexibility, Fonts, graphic design, grid container, grid layout, grid vs flexbox, jen simmons, layout, minmax, minmax content sizing, Mozilla, Resilient CSS, Resilient web design, Responsive design, responsive web design, web design, web development Related Posts Historia de HTML House Impeachment Inquiry Hearing – Feldman, Karlan, Gerhardt & Turley Testimony Display settings (block, inline-block, inline, and flex) – Web design tutorial (using the Old UI) About Author admin 87 Comments Mohamed Hussain S H January 30, 2018 Thanks for the video and time u spent on creating this video…short and sweet… Reply MUMPTASTIC January 30, 2018 Loving these videos! Thank you Jen! Reply Valeria Garcia January 30, 2018 Jen is the best! So excited for these videos. Reply KonRud5 January 30, 2018 What about subtitles, couldn't you add English subtitles? Reply Moamen Gomaa January 30, 2018 relly i am happy to see yours lessons Reply busyrand January 30, 2018 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. Reply Will Woodgate January 31, 2018 Super useful, many thanks! Reply Nathan Eaves January 31, 2018 This is super helpful! Especially the layout difference between Grid and frameworks like Bootstrap…that cleared up a lot of confusion for me! Reply Bojan Subasic January 31, 2018 Keep up the good work… short and straight to the point. Reply Maximus Williams January 31, 2018 Great explanation (w/visuals) of when to use CSS Grid and Flexbox. Thank you, Jen 🙂 Reply Steve Hemmer February 1, 2018 Great video's. You great at teaching and explaining in a simple manner. Thanks!! Reply Joseph Torres February 2, 2018 Amazing video, thank you for crushing my concerns over whether to still use convention CSS and CSS Grids. Reply instantwalrus February 3, 2018 Clear explanation! New subscriber because of this video. Reply Abdul Ghani February 4, 2018 another great channel about web development Reply seemsas February 7, 2018 this explanantion is very good. I will check your other tutorials, too. I just subscribed. Thank you! Reply smonkey001 February 8, 2018 Wow, love this overview of layout choices! Compact yet full of info/exp! Reply Miron Swyst February 10, 2018 Wow , possibly the best articulation I’ve been trying to grasp and no one really explained Reply Peter Grady February 13, 2018 Hmm not sure you are giving CSS Grid enough credit. Not an expert but it sure seems like it can do everything Flex can do – and a whole lot more. In a couple years I think it will be dominant as as far as Web Design goes.. Maybe you have some counter examples I don't know. But off hand I can't think of any.. Reply Bogac Guven February 14, 2018 Nicely put, thanks. Reply Karunakar Patel February 16, 2018 Great video i really loved it. keep uploading..:-)) Subscribed with the Notifications on..!!!! Reply Luke Vincent February 18, 2018 Thumbs up is currently on 399, will someone please click to make it 400 !!! Reply Alejandro Sobko February 18, 2018 Thanks! Reply Eduardo Paixão February 19, 2018 Vídeo legal. Obrigado! Reply Patrascu Lucian February 21, 2018 Beside its own utilities, it seems like Grid can also do everything that Flexbox does Reply Drupalastic February 25, 2018 Great…. Its so important and useful to understand the basics….. Reply Paul Ehigie March 13, 2018 nice thanks for this, you made it simple to work and know when to use them properly. Thanks again Reply Hakki Karahan March 16, 2018 teyze sakal traşın gelmiş burda grid mrid diyon. Reply D Convention March 20, 2018 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! Reply Genesis Barrios April 15, 2018 Just found your channel, have only seen this video. Subscribed. You explain things beautifully and have a very soothing voice. Reply Chris Valiente April 20, 2018 2:32 Jen starts throwing up gang signs. Reply S Jankins April 28, 2018 Thank you for the latest features 🙂 Reply Cute Php May 6, 2018 Hi dear I am a new in your channel….do you have lessons for( html)?!!!! Reply john jester May 15, 2018 As far as I'm concerned flexbox and css grid was created by w3c to work together 🙂 Reply Rajesh Kumar May 31, 2018 Thanks for the knowledge sharing Reply B Begich June 3, 2018 CSS Grid for outter content of web and flex for inner content (inside of outter aka parents elemented i.e. sections (header, articles.. etc..)). Reply Nisarg Rai June 6, 2018 Thanks!! Reply Sol R June 9, 2018 Very helpful as I just started learning about those two subjects. Thanks! Reply Jean Deux June 16, 2018 With all due respect for her expertise, I love when she says "bootstrap". Reply Hugo Rivera Anchayhua July 1, 2018 thank u very much……everything very clear…!!! Reply Benjamin Setor July 6, 2018 I just can't stop listening to her. i'm watching every single video on this channel Reply Jansenio Gonzales Venegas July 11, 2018 se puede usar grid y flexbox al mismo tiempo? Reply Dev Station July 13, 2018 Excellent Reply Balla Alin July 18, 2018 Smart Lady right there Reply Mossawir Ahmed July 22, 2018 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. Reply MrJloa July 23, 2018 3:45 container position:relarive, caption container position:absolute with bottom:0. I see no reason to use grid here, actually Reply Jagruti Dadia July 23, 2018 Wonderfully explained…thankx. Reply Bernard Tremblay July 26, 2018 #Lateral – If you're into chakra and such … even just some … not best to have stone or metal at throat point. Best is wood, or bone … maybe even coral. Something that connects to living.cheers Reply David M July 27, 2018 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. Reply Matteo C July 27, 2018 Mattia mi ha detto "Flexbox" Reply Arek July 27, 2018 you sound like The Mother of CSS Reply Thomas Wunner July 31, 2018 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? Reply Trần Dương Ngọc Dung August 5, 2018 Thank you..^_^ Reply ben levy September 20, 2018 Thanks it sorted out my brain… Reply Diwakar Singh October 5, 2018 fantastic explanation 🙂 Reply Jonas Haugen October 5, 2018 This looks like a good morning talk show Reply Yeni Berry October 29, 2018 This answers my questions about the difference between flexbox and grid. Thank you! Reply kandysman86 November 15, 2018 I'm a 35 year old noob, but grid is 1000 times easier for me than flexbox: ( Reply Sean Coolidge December 6, 2018 Diagrams are soooo helpful! <3 Reply Ammar Taicho December 12, 2018 1:40 Jen starts throwing nasty things. Reply Isi Saleh January 4, 2019 Thank you so much! Reply WebFletcher January 18, 2019 really awesome ! Reply Matin Y February 2, 2019 good 🙂 Reply Kisame Hoshigaki February 6, 2019 How do you come up with this complicated concepts in simple words 🤔 Reply Terry Chianson February 9, 2019 lovely Reply Kacper Kujawa March 21, 2019 wtf john romero is a webdeveloper? Reply Bayu Setyawan March 27, 2019 which one is good for responsive, grid or flexbox? Reply Avean April 12, 2019 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. Reply Charls Catipay April 22, 2019 No regrets on subscribing on your channel <3 Reply BloodyClash April 25, 2019 OMG. Imagine what loads of work modern Browsers have to do with all that stuff 🙁 poor browsers Reply Bloc-Notes April 26, 2019 Merci ! Reply Roman's Music April 28, 2019 Thank you for these great examples https://labs.jensimmons.com/2017/01-012.html Reply Igor Augustyński April 30, 2019 I don't entirely agree with You Layout Land. At the beginning of the video You say that css-grid should incorporate into the natural flow of a web document (being that it goes from the top to the bottom or inline from one side to another) and be used only in some parts of the website. But as I see it, the main layout of the page should be done using css-grid, as it's where we could use most of the benefits it brings, and the older flex or float or whatever should be applied inside the areas. Reply Nikhil Patil May 7, 2019 Huge Fan mam, Pure knowledge keep it up. Reply Peter Romero May 10, 2019 CSS for dummies. Thank you! Reply MMO Blitz May 30, 2019 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. Reply superreverbfreak June 5, 2019 You make my teacher sound like an idiot Reply Rodrigo Vázquez June 6, 2019 Just found about this channel…already suscribed Reply Zaheer abbas June 15, 2019 Nice Video Reply Davi Moraes June 24, 2019 Wow, so glad I found this channel!!!Subbed 😀 Reply FlicksCode June 28, 2019 You are very articulate. I love that. Reply Louis Yungling Piano Studio June 29, 2019 Thank you for explaining differences and when/how one might be used or not. I found this very helpful. Reply IT'S RIR360 June 29, 2019 Just use flexbox and grid both. Reply hyvraine11 July 3, 2019 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! Reply francois poullot July 12, 2019 je ne parle pas un mot d'anglais, mais avec la traduction et ces petits schémas c'est pas mal du tout Reply Kedar Naik August 6, 2019 Thank you. Reply El Sosi666 August 9, 2019 Que buen canal. Se agradece los subtítulos al Español. Reply robertto1ify August 17, 2019 No need use floats anymore Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.