Why You Should Learn CSS Grid Before Flexbox

Key Takeaways

hello my frontend friends my name is Kevin and welcome to my podcast General amings this week we're going to be talking once again about flexbox and grid CU it's been very front of mine lately I mentioned it in last week's episode and now I put out a video based on sort of what I talked about in last week's episode where about like the misconceptions of the 1D versus 2D at least in my own opinion when it comes to flexbox and grid and then that led to comments on that video which of course is like a bunch of people to saying flexbox is good enough I think part of the problem is on how everything is taught a little bit and I've been thinking about that more and there was a discussion then in my Discord community that happened where it was about the nitty-gritty of how flexbox works and that entire discussion reinforced this idea in my own opinion that grid is actually a lot simpler than flexbox is even though it doesn't seem that way at the beginning right when you look at flexbox you declare display flex and stuff happens so yeah that's easier cuz you do display grid and then nothing happens really your spacing might increase if you if you have margins on stuff and that's about it and and that can be a little bit underwhelming and then as soon as you want to really start using grid well now I need grid template columns and then there's new units involved in there and there's new other stuff and then there's the rows and then there's spanning line numbers or there's line names and there's grid areas and it it seems like there's a lot happening whereas with flexbox again you just display play flex and you have a flexible layout it's fantastic it's cool but the problem with flexbox is the complicated part starts when you start trying to understand what's happening like if you can explain out loud like write it down or talk it out now how flexbox works and how does the browser figure out how big to make things when it makes everything into columns like what's actually going on there that's kind of weird right and and whether you maybe you can explain it and it will take more explain than you might think to really get into the like the deciding of how big every single thing is uh whereas with grid that's a lot easier to understand there's less magic going on right that to understand the layout algorithm for grid is much easier because the parent is controlling it you declare your column sizes it makes some cells and then you place stuff in those cells that's it you have control over what the layout is doing where the flex box you declare your display flex stuff is happening then you can go onto the children and you can start trying to make you know more rigid layouts by setting widths or Flex bases Flex Basi how do you do multiple Flex bases anyway uh you you do your Flex basis on the children or or your widths or whatever to sort of try and Wrangle them but then they're not really going to be that size that's sort of the ideal size right and then you might have shrinks or you probably have a shrink on there you might have a grow and then how is it figuring that out even if they all have the same Flex basis there's the potential they're not all the same size why is that happening and because of that extra complexity in understanding what's happening with flexbox I actually think people should learn grid first because grid again there's a few extra things in there that you need to learn right off the bat to actually make a layout instead of just display flex and move on but all of those things are really easy to understand and it's just these new properties that you need right you put a grid template columns and maybe a grid template rows and then you have a layout and then you place stuff in those cells and it's just going to automatically place them in there anyway and if you need to move them you can or if you need to span things you can and that's all you really need at the beginning grid template rows grid template columns understand a little bit about line numbers and how to span across multiple rows and columns you don't need to get into autofit or fit content which is weird a little bit with Grid or like what happens if you're doing more intrinsic sizing on your grid template rows or columns you don't need any of that you just basically need 1fr or maybe a fixed unit somewhere and you can have a layout and you can understand exactly how that layout is working and that's that leads to people having confidence in what they're doing because they understand the layout that they're building and why the layout is working the way it does whereas with flexbox where a display Flex works and it's great there's that added like okay now I need to do this next thing with it well to understand how to do that more comp licated layout with it you need to understand a little bit of the magic that's going on behind the scenes and that's hard to explain and it's hard to really wrap your mind around that especially if you're newer to CSS I think you should learn the very basics of grid to understand how to make a structured grid and then you can just add a little bit of flex box in there next because you're learning that grid is good at structured layouts and then you're like oh now I need this thing that's less structured a navigation menu or something like that where you know your Navar needs different sizing for each one of the elements or you need something that's just the stuff that Flex is good at out of the box without having to select the children and do adding Flex grows or adding other weird stuff your Flex basis and all of that you're just display Flex add a gap and you're good that that's like the next step right the basics of grid then where does flexbox fit in what is flexbox good at and that just sets you up with like a really strong Foundation I think where each one of those now you can sort of level up at the same time you can learn you know learning about the alignment stuff with them you can do that the same time for both of them along the way but you have this strong Foundation of okay in this situation Grid's going to work really well and in this other situation flexbox is going to work really well and you've really set yourself up for this path of least resistance every time you're trying to make a new layout um and the resistance of people wanting to learn grid because of this Flex box does it good enough and I've see the opposite there was comments as well of like I just use grid for everything and neither one of those tools is the right job for everything you can't do any layout or I mean yeah there there are layouts one can't do or the other can't do and there's other layouts that are just so much harder and you're really limiting yourself and I know that's what I talked about last week so I don't want to get into that but just this idea of learning grid first I do think is the right way to go today and if you have friends that are learning and getting into front end development and they haven't got to layouts yet push them that way tell them know go check out grid and if you haven't learned grid yet go and check it out and just basic stuff don't need to do like this deep dive comprehensive thing to really understand how it works and then it's just all about like leveling up slowly from there it's a really setting yourself up for success in terms of you're going to be looking at everything you're trying to do critically right what is the best approach for doing this what is the best approach for doing that maybe absolute positioning is something that you're going to need and you're going to you have learned about that then you go okay for that it's kind of weirdly positioned it needs to follow this like I don't know exactly how I'm going to do that but I know it probably isn't going to be one of these other things maybe I need to learn something new but by understanding there's multiple tools to do layout and there's other things just that's the thing with CSS right there's so many different ways of doing the same thing but a lot of the time those same things are very different from one another uh and there's a better approach depending on the situation that you're looking at and by understanding that it's not just like forcing flexbox to do this one thing or forcing grid to do this one thing cuz that's the one that you've decided that you're going to know I think it's just a really good way to build that critical thinking and that problem solving in in the early days uh in in learning both of them but by I I do think it does simplify things by starting with grid and then moving into flexbox so you CU flexbox and trying to get it to do more grid type behaviors and more layout type things the grid is just more set up for um it just makes everybody's life easier so yeah that's that's it for today I don't want to Ramble On too much more cuz I could just keep complaining about all these comments that I keep getting of people that are being stubborn and uh it's driving me nuts a little bit and I have more content coming on grid versus Flex um about you know deciding which one to use and all of that and some other things just because it's very front of mine right now and I I really want to hammer home and try and get people past this hesitancy that they seem to have for grid cuz flexbox isn't the solution for everything and please if you are only using flexbox give grit a chance you might be really surprised with how easy it is to use and just how well it works for some of the things that you've been using flexbox for but yeah that's it for this week thank you very much for listening and of course until next time don't forget to make your corner of the internet just a little bit more awesome