Flexbox is NOT easier than Grid

Key Takeaways

Hello my front-end friends and welcome to my podcast general musings. My name is Kevin and here in my podcast to talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development. And this week we're doing things a little bit differently cuz I'm outside. Uh cuz I just got fed up with what I was working on and I needed to step out and I also needed to record something. And it's a nice day today though. It's a bit breezy. Um I'm hoping the wind isn't too bad in the audio. Uh and yeah, we'll see. We'll see how it goes. If it's terrible, I just won't post it and I'll have to re-record later. So, fingers crossed that isn't what ends up happening. Uh, the reason I'm fed up is a little bit of what I want to talk about today, which is the this the idea that flexbox is easier than grid. And that might seem like, oh, you know, if you've been following me for a while, you know that I'm a big grid person. I use grid all the time. I say use grid. I've had videos where people go like, "Oh, if you just use flexbox for that, it would have been easier or simpler or whatever." And I tend to disagree. If if I use grid, I usually use it because I think it's the easier solution. And I know there are grid supporters out there. I'm not the only one, but there's a lot of people that say that group they tried using grid and it was too hard and they they just didn't bother because they could accomplish what they needed to with Flexbox. And I understand that. If you've been using Flexbox for a while, you're definitely going to be more comfortable with it. And as you're trying to figure out this grid thing and it's not working and you're just like, "Oh, I can do this with flexbox. I know how I would do that." So, you turn to that. My main issue though is right now I'm trying to I'm do I'm completely revamping CSS demystified. I'm ripping the course down from to zero and rebuilding it. And I've gotten to a part where I'm doing some grid and flexbox stuff. And I think I'm going to change my approach to what I was planning originally just because I feel like I'm forcing the issue a little bit in in covering certain material and I want to let it arise more organically cuz a very big part of the course is I want it to be as practical as possible rather than it being like let's learn this subject and then let's learn this subject and let's learn this subject. I want it to be something of I was learning CSS now and I was going through not learning it either. The course isn't for people that are going from scratch. The course is for people that are already have written it and they're just sort of stuck or confused or frustrated by it, which is a lot of people when it comes to CSS. And so like just going through it in a way of like this is I wanted to be the course that I would have wanted when I was stuck with it. That was my original intention when I did the first version of the course and it's the same intention now. I'm just taking a bit of a different approach cuz it's been a while since I did the first version of it. But anyway, I'm at this stage of going, okay, we people understand the basics of grid and the basics of flexbox and I have little primers on them just in case because you might have been doing, you know, writing CSS for a little bit now, but you again might be know one of them really well, but not the other one. So, I go a little primer on the basics of them. And now I'm getting into a little bit more advanced though nothing too advanced and just doing some intrinsic layouty stuff and with grid like you have the minmax with the auto fit or autofill and it just works and it's it's kind of weird because the declaration's long but then I started trying to show a similar example with flexbox for something a little bit different and the advantage with flexbox is you can do sort of this two column layout like a main with a sidebar without having to rely on um media queries or anything. You can make it intrinsic. But then like okay well for this to work I have to explain how width works with flexbox cuz that you know with the shrinking like how does it figure that out? So okay we have to calculate the max size of something or we don't the browser figures out the max size of something. So okay we have to explain what max size is. And so I did another lesson earlier in the course now to go over max size min size and fit content. Okay, we've covered the intrinsic sizing of things and how that works. So, let's reference back to that. And then we have flexbox figures out that max size. And then if there's not enough room for all the elements to go next to one another, it will start shrinking them. But ideally, it keeps them all at that max size. I said max size, it's max content would be max content, min content, and fit content, right? Uh and then so then it starts shrinking them and it uses the shrink algorithm to do that. But then if we set a minimum size on something then we can sort of prevent it from shrinking too small. So like a min inline size 50% let's say and then okay that works but then I need to add a flex grow now because when it breaks over it might you know anyway it's just like every step along the way there's this other thing that you need to understand about flexbox to really understand how it's working because that's the other thing is I don't want to say like here's the code to make this layout. I want it to be here's how all of this is working because you're not going to build this exact same thing. You're going to build something that's a little bit different than in this example because in my sidebar for like right now it doesn't get huge by default because the content in it isn't that big. So it's not fighting it in the same way that you might if your sidebar has a different type of content in there and like so we have to understand the the idea of how all of this is working. Flexbox is so complicated and I understand it, but it's it's I'm finding it and I've done a lot of videos on it, so I know I can explain it all, but I want to do it in a way that's not like here's a ton of material all at once to try and understand. And with grid, and I guess the problem with grid versus flexbox is there's new things. There's new stuff in flexbox, too, but there's more new things in grid, right? So you have template columns and template rows and then you have grid areas and you have named lines and named areas and you have new units. So you have the FR unit. What's that doing? And then you have the minmax that takes it only works within grid. Uh and there's a fit content that's different from the other fit content that's only a grid fit content. And there there are a lot of unique grid things to learn. And I completely get that it can feel very overwhelming if you're just like, you know, you open up the the CSS stricks page of grid and you just start going through everything in there and it's just like, holy crap, there is too much here. And that I understand, but for teaching it, I find it so much easier just because you don't need 90% of the grid stuff, especially at the beginning. And then when a new situation comes up, you don't need to like go all in all of a sudden. You just add this one next little thing. And there's not layers of stuff you need to understand to add that new thing on top. You can just add one thing at a time and it makes it really easy. Whereas with flexbox, I feel like if you're going to go past the basics of display flex, it's intrinsic. You add a flex wrap on there and things will wrap if they run out of room. Like as soon as you get past that and you, you know, it' be like, "Oh, I need equal columns. You can just do a flex one. What's that doing? Why is that working?" Right? And I find yes, that does work. Sure. Uh but why is it working? and what are the potential issues that could come up with that. And then you know to understand what doing a flex one shortorthhand on all the children is doing you sort of have to you you want to understand what flex basis flex shrink and flex grow are and flex basis is kind of weird too and then you have the different directions with flexbox and you can change the axes around I don't know I just find like for everybody who says that grid is harder or they they're able to do what they need to do with flexbox I still don't think they're they completely understand what flexbox is doing. I think they've just come up with patterns that they're used to using that they're comfortable just using those all the time so they can go back to them and use them over and over again. At least that that's what I think is actually going on. I could be wrong. Um, but that that's sort of what I think is is happening most of the time. You can do so much with flexbox when you understand it. And even then, I understand it really well. I know a lot of things I can do with it and I still end up going to grid for a lot of stuff. Wow, it's windy out here. This is definitely going to get picked up. It wasn't this windy yesterday. It was a really nice day then, too. I'm just dreading having to re-record some of this uh or the whole thing, but that may may be on the cards. I'm hoping we're going to try doing some noise reduction first uh post post-production noise reduction and see where that goes and before I before I re-record this. Um, but yeah, I I think and if you're one of those people that has been hesitant on or that tried to get into grid and hesitated a little bit or you had trouble with it, I definitely would encourage you to give it another go. Um, and if you've been using Flexbox and find it easier, again, ask yourself, is it because I'm just I'm using familiar patterns like that. That happened to me when I started teaching. I thought I knew enough to be able to teach. I remember that first class when I was trying to like explain things once you get past the very basics, right? And then you start getting into layout stuff and especially at that time we were using some float based layouts which makes it hard to explain cuz you have to explain floats and that's a hard thing to teach. But it was you just hit this thing of like, oh, I I don't actually know how or why this is working. I just know it does work and I've found this pattern that works for me that I can use across all these different sites and it works fine. uh are across these layouts and in a way I think I limited what I was doing to the familiar patterns that I already had and that led to like limiting myself in a way and that's one of the reasons and I I keep talking about this all the time but teaching really made me better at CSS because all of a sudden I had to go okay I don't understand why this is working but I have to explain it so I need to actually learn what's happening and that's what happened with flexbox for me I was able to use flexbox box quite effectively to do enough. But then when I really got into how flexbox calculates the size of something, uh, which Firefox is still the best browser for figuring that out cuz they actually have a visualizer going on, showing you what values are being used and why they're being used in their dev tools. Um, that I wish the other browsers would incorporate cuz like Chrome has surpassed Firefox in a lot of ways for the dev tools. They used to say like if you're writing CSS, you should only be using Firefox. Um or if you're debugging CSS, I guess you should be using Firefox because it the CSS dev tools were by far the best. And now Chrome basically took a lot of the features. They copied a lot of the features, which is to be expected. That's what happens with all the dev tools copying each other. But now they've improved a lot of the other ones. There's a new thing coming now that I'm really excited about that Bram has just posted on Blue Sky uh showing that it's going to show the calculation results of everything that's going on. So if you have like or first if you have a custom property, it will show you what the value of that custom property is without you having to click on it. You can just hover and it gives you a little tool tip or whatever that will say like you know the value of that is this. But let's say there's a calc in there. It will actually it'll show you the calc and then you can actually go to the next step or it'll show you the next step of what that calc is actually the the the result of that calc. Or if there's a min max it'll show you the min and the max. It crosses out the one that it's not being not a minax. If you're using a min value min function and there's two values or three values it crosses out the ones that aren't being used. I think it currently already does that. But now it's going to show you is say there's a calc or a percentage even. You have 50% comma 500 pixels, right? it will show you the calculated value of that 50% so you can see the difference between the two and you play with it live and it will update and it showed in his post he showed multiple steps deep of all of that happening and stuff so yeah that's really exciting and cool but Firefox still has the best one for visualizing and understanding how flexbox is working so if you do want to dive into it I have a video I'll put a link to my video where I use those dev tools to explain how flexbox works uh because yeah, I think it if you do use flexbox for anything beyond the absolute basics, it it opens up new possibilities when you understand it a bit deeper. Uh so yeah, I'll put that link for anyone who is interested in that in the the show notes. Um but yeah, that's it today. I think just a a complaint about how complex flexbox is. And uh and I really do think it's just like to the reason that it's hard. I guess it's not a problem that it's complex. It's a problem when you have to teach it. And it's partially triggered because I keep hearing from people how they avoid grid because it's too hard or too complicated and all these things. And I just find grid has a lot of pieces to it that are all much simpler than anything Flexbox is doing, which is just all this like behindthe-scenes magic a lot of the time where we sort of have some levers that we can pull to to push it in the right direction. But so much of Flexbox is just, and this is the good thing about Flexbox, but so much of Flexbox is just dealing with these little things and trying to figure like the individual behind the scenes things out and dealing with the intrinsic sizes and sort of wrangling them a little bit. Um, and just trying to wrap your mind around what is actually going on. But yeah, I think that I think that's it for this week. Uh, I just wanted to vent a little bit from that the the lessons I've been trying to write on on Flexbox and enjoy the fresh air for a few minutes while still accomplishing something. So, 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.