Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Flexbox is NOT easier than Grid
862 Plays18 days ago
Today I'm tackling a topic that's been on my mind: the perception that Flexbox is easier than Grid. I share my frustrations and insights while revamping my CSS Demystified course.
Recommended
Transcript
Introduction to 'General Musings' and the Setting
00:00:00
Speaker
Hello, my friend and friends, and welcome to my podcast, General Musings. My name is Kevin, and here in my podcast, I've talked about whatever is front of mind for me in any given week, usually in some way that's related to front-end development.
00:00:10
Speaker
And this week, we're doing things a little bit differently because I'm outside, because 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. I'm hoping the wind isn't too bad in the audio.
00:00:27
Speaker
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.
Flexbox vs Grid: Kevin's Perspective
00:00:36
Speaker
And the reason i'm fed up is a little bit of what I want to talk about today, which is...
00:00:44
Speaker
yeah 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.
00:00:58
Speaker
I've had videos where are like, oh, if you just use Flexbox for that, it would have been easier or simpler whatever. And I tend to disagree. if If I use Grid, I usually use it because I think it's the easier solution.
00:01:09
Speaker
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 they tried using grid and it was too hard and they they just didn't bother because they could accomplish what they needed to do 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.
00:01:27
Speaker
And as you're trying to figure out this grid thing and it's not working and you're just like, all I could do this with Flexbox. I know how I would
Revamping the CSS Course
00:01:34
Speaker
do that. So you turn to that. My main issue though is right now I'm trying to, I'm do i completely revamping CSS Demystified. I'm ripping the course down to zero and rebuilding it.
00:01:46
Speaker
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.
00:02:02
Speaker
in in covering certain material and I want to let it arise more organically because 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.
00:02:33
Speaker
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
Challenges in Teaching Flexbox
00:02:45
Speaker
now. I'm just taking a bit of a different approach because it's been a while since I did the first version of it.
00:02:49
Speaker
But anyway, I'm at this stage of going, OK, 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 have a little primer on the basics of them. And now I'm getting into a little bit more advanced, though nothing too advanced.
00:03:10
Speaker
and just doing some intrinsic layouty stuff. And with grid, like you have the min max with the auto fit or auto fill and it just works and it it's kind of weird because the declaration is long.
00:03:22
Speaker
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 media queries or anything. You can make it intrinsic.
00:03:39
Speaker
But then I'm like, okay, well, for this to work, I have to explain how it works with Flexbox because that, 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, that okay, we have to explain what max size is.
00:03:56
Speaker
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 next to one another, it will start shrinking them. But ideally it keeps them all at that max size.
00:04:18
Speaker
I said max size, it's max content would be max content, min content and fit content, right? 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, pick.
00:04:44
Speaker
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.
Grid Teaching Advantages
00:05:00
Speaker
You're going to build something that's a little bit different than this example.
00:05:02
Speaker
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. in Flexbox is so complicated.
00:05:23
Speaker
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.
00:05:36
Speaker
And with Grid, And I guess the problem with grid versus Flexbox is there's new things. There's new stuff in the 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. you have VFR unit, what's that doing? And then you have the min max that takes, it only works within grid.
00:06:01
Speaker
ah And there's a fit content that's different from the other fit content. It's only a grid fit content. and there There are a lot of unique grid things to learn. And I completely get
Insights Gained from Teaching CSS
00:06:12
Speaker
that it can feel very overwhelming if you're just like, you know, you open up the the CSS Strix page of grid and you just start going through everything in there. And it's just like, holy crap, there is too much here.
00:06:21
Speaker
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.
00:06:32
Speaker
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 flex box 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 start you know it'd 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
00:07:03
Speaker
Yes, that does work, sure. um But why is it working and what are the potential issues that could come up with that? And then, you know, to understand what up doing a Flex 1 shorthand on all the children is doing, you sort of have to, you 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 Flex Box and you can change the axes around. i don't know.
00:07:26
Speaker
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.
00:07:39
Speaker
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.
00:07:53
Speaker
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.
00:08:05
Speaker
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 or the whole thing. But...
00:08:20
Speaker
That may may be on the cards. I'm hoping we're going to try doing some noise reduction first, ah post post-production noise reduction and see where that goes. And before i before I re-record this.
00:08:31
Speaker
But yeah, 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.
00:08:44
Speaker
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.
00:09:00
Speaker
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 because you have to explain floats. And that's a hard and thing to teach.
00:09:15
Speaker
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 ah are all across these layouts. And in a way, I think I limited what I was doing to the familiar patterns that I already had.
00:09:40
Speaker
And that led to like limiting myself in a way. And that's one of the reasons, and 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.
Tools and Improvements in CSS
00:09:58
Speaker
I was able to use Flexbox quite effectively to do enough. But then when I really got into how Flexbox calculates the size of something, ah which Firefox is still the best browser for figuring that out because they actually have a visualizer going on showing you what values are being used and why they're being used in their dev tools that I wish the other browsers would incorporate because like Chrome has...
00:10:25
Speaker
surpassed Firefox in a lot of ways for the dev tools. I 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.
00:10:39
Speaker
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 ah 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, will show you what the value of that custom property is without you having to click on it. you just hover and it gives you a little tool tip or whatever that will say like,
00:11:10
Speaker
you know, the value of that is this. But let's say there's a calc in there. It will actually it is show you the calc and then you can actually go to the next step or to 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, and not a min max. if you're using a min value, a min function,
00:11:30
Speaker
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?
00:11:43
Speaker
it It will show you the calculated value of that 50%. So you can see the difference between the two and play with it live and it will update. And it showed the 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.
Encouragement and Further Learning Resources
00:12:12
Speaker
ah Because yeah, I think if if you do use Flexbox for anything beyond the absolute basics, it opens up new possibilities when you understand it a bit deeper. ah So yeah, I'll put that link for anyone who is interested in that in the the show notes.
00:12:26
Speaker
um But yeah, that's it today, I think. Just a a complaint about how complex Flexbox is. and ah And I really do think it's just like to the reason that it's hard. and I guess it's not a problem that it's complex.
00:12:42
Speaker
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...
00:12:56
Speaker
has a lot of pieces to it that are all much simpler than anything flexbox is doing which is just all this like behind the 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 and this is the good thing about flexbox but so much of flexbox is just dealing with these little things and trying to figure that 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.
00:13:29
Speaker
But yeah, i think that's I think that's it for this week. 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.
00:13:44
Speaker
So thank you very much for listening. And of course, until next time, don't forget to make your corner of the in internet just a little bit more awesome.