Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Why You Should Learn CSS Grid Before Flexbox
938 Plays4 months ago
This week I'll talk about why I believe Grid is simpler and more intuitive to learn first compared to Flexbox, exploring some common misconceptions, the complexity of Flexbox, and how learning Grid first sets you up for success.
My primary YouTube channel where I teach frontend development, with a strong focus on CSS: https://youtube.com/@kevinpowell
✉ The written version of my newsletter: https://www.kevinpowell.co/newsletter
💬 Come hang out with other dev's in my Discord Community: https://discord.gg/nTYCvrK
Recommended
Transcript
Introduction to Flexbox and Grid
00:00:00
Speaker
Hello, my friend and friends. My name is Kevin, and welcome to my podcast, General Musings. This week, we're going to be talking once again about Flexbox and Grid, because it's been very front of mind 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 ah 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 just saying flexbox is good
Community Insights: Grid vs Flexbox
00:00:31
Speaker
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.
00:00:53
Speaker
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 because you do display grid and then nothing happens, really, and that that your spacing might increase if you if you have margins on stuff. And that's about it. in And in 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 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 explaining than you might think to really get into the like the deciding of how big every single thing is.
Grid's Predictability and Layout Control
00:02:07
Speaker
ah 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. There's a flexbox. You declare your display flex. Stuff is happening. Then you can go on to the children and you can start trying to make you know more rigid layouts by setting widths or flexbases. How do you do multiple flexbases?
00:02:46
Speaker
ah You you did do your flex basis on the children or or your wits 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?
Learning Strategy: Grid First, Then Flexbox
00:03:08
Speaker
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.
00:03:26
Speaker
But all of those things are really easy to understand. 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 auto-fit 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 one FR or maybe a fixed unit somewhere and you can have a layout and you can understand exactly how that layout is working.
00:04:10
Speaker
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 complicated 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 flexbox in there next because you're learning that grid is good at structured layouts and then you're like oh and now I need this thing that's less structured a navigation menu or something like that where you know your nav bar needs different sizing for each one of the elements or you need something that's just the stuff that flex is good at
00:05:03
Speaker
out of the box without having to select the children and do adding flex grows or adding other weird stuff, your flex basis and
Flexbox for Specific Tasks
00:05:11
Speaker
all of that. You just display flex, add a gap and you're good. but 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 at time for both of them along the way, but you have this strong foundation of, okay, in this situation, grid's gonna work really well, and in this other situation, flexbox is gonna 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.
00:05:47
Speaker
um And the resistance of people wanting to learn grid because of this flexbox does it good enough and I see the opposite there's 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 are 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, you know, go check out Grid. And if you haven't learned Grid yet, go and check it out. And just basic
Understanding CSS Tools for Layout
00:06:29
Speaker
stuff. You don't need to do like this deep dive comprehensive thing.
00:06:32
Speaker
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 gonna you've learned about that and 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. 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. And there's a better approach depending on the situation that you're looking at.
00:07:22
Speaker
And by understanding that it's not just like forcing Flexbox to do this one thing or forcing Grid to do this one thing because 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 in in learning both of them. the bi I do think it does simplify things by starting with grid and then moving into flexbox. So you just flexbox and trying to get it to do more grid type behaviors and more layout type things where 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 because I could just keep complaining about all these comments that I keep getting of people that are being stubborn.
00:08:08
Speaker
and It's driving me
Upcoming Content on Grid and Flexbox
00:08:10
Speaker
nuts a little bit. and I have more content coming on Grid versus Flex about you know deciding which one to use and all of that and some other things just because it's very front of mind right now. and I really want to hammer home and try and get people past this hesitancy that they seem to have for Grid because Flexbox isn't the solution for everything. and Please, if you are only using Flexbox, give g Grid 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.