Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Navigating CSS Layout Decisions
601 Plays4 days ago
Inspired by recent articles from Andy Bell and Alex Riviere, I explore a bit of my own dicision making process when deciding between Flexbox and Grid. This leads to a discussion on content-first layouts, and the idea of intrinsic layouts.
Alex's article: https://alex.party/posts/2025-03-23-grid-first-flex-third/
Andy's article: https://piccalil.li/blog/if-it-works-its-right/
Every Layout: https://every-layout.dev/
Recommended
Transcript
Introduction to 'General Musings' and CSS Layouts
00:00:00
Speaker
Hello, my friend and friends, and welcome to my podcast, General Musings. My name is Kevin, and here at my podcast, I 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 definitely staying on topic because we're going to be talking about CSS layouts and deciding on what to use between Flexbox and Grid and the other options that we have out there and how you should go about doing that.
Expert Opinions on Flexbox and Grid
00:00:25
Speaker
And the reason this is front of mind for me right now is, and I'll put the link to these articles in the description slash show notes, whatever we want to call them, is Andy Bell recently wrote an article that was in reply to an article written by Alex Riviere.
00:00:43
Speaker
Starting with Alex's article, he said, and i sort of agree a little bit with what he said, but he said, start with grid, then go with block layout and then go with Flexbox.
00:00:54
Speaker
And i thought that was interesting. Andy sort of replied saying, you know, it depends a little bit on how you want to work. it And I do agree with Alex in that I think grid is often or not not often. I think grid should be like, okay, this is my default first choice for a layout if I don't know which one to use.
00:01:12
Speaker
And then we can go from there.
Intrinsic Layouts and 'Every Layout' Approach
00:01:14
Speaker
In Andy's reply, he'd mentioned how it depends because there's sort of different approaches. on how to create layouts, right? And the yeah the more intrinsic approach versus grid, which is more like grid has more control on things in general. You're saying three columns or two columns or whatever it is when you're creating a layout with it, or and you can also define your rows if you need to.
00:01:38
Speaker
And he mentioned every layout, which I'm a huge fan of. If you don't know every layout, once again, I'll put a link in the show notes. And every layout is all of about controlling our layouts in intrinsic ways. And there's some...
00:01:52
Speaker
hacky solutions, I guess. but just so It pushes how Flexbox works and to take advantage of that with some interesting calcs and other things. And I learned a lot by going through the patterns they create in every layout into how we can take advantage of different things and push the limits. And I've actually used some of those things within Grid as well.
00:02:13
Speaker
I don't remember exactly what my use case was, but I think it was for going from like zero to three columns without a media query. Maybe I'm wrong. There was something like that you could do anyway, ah to sort of force things to happen.
00:02:26
Speaker
It's this idea of intrinsic layouts where the layouts are more based on the size that the content needs versus if you're doing a grid, a lot of the time you're establishing your grid and the content has to live within that grid.
00:02:38
Speaker
And I think that both people are right.
Flexbox vs. Grid: Control and Content
00:02:44
Speaker
And then actually Andy said that one of the things Andy said in his post was that if you're working in with grid and say setting a media query on when you want to go from one to three columns type of thing, that's where you want to feel like you're more in control. Whereas the content based approach is more like, okay, when the column has room when I have room for like say 32 ch of character wide or something like I'm basically more on the sizing that the that element needs the minimum size that element needs then it will just turn to two columns or just turn to three columns and so it's based on like the requirements you're setting on the children more than the parent controlling what's happening
00:03:26
Speaker
And I'm a big fan of Andy's idea of being the, I think he calls it the mentor instead of the micromanager or something like that. Like you're the mentor of the browser, and not the micromanager of the browser.
00:03:37
Speaker
For me, it's I always say like you have to work with the browser. The browser is doing a lot of really smart things. and We should lean in and let the browser make decisions for us as much as possible. And with like grid auto fit or auto fill, you can sort of get that type of thing really easily with grid.
00:03:52
Speaker
I'm always searching for more ways of doing it with Grid, just because I find, for me, the way I like to work, and I i like making this distinction between Flexbox and Grid that makes it a little bit easier, I guess, for me. Whereas Grid is, yes, I want and want the parent to control things, whereas with Flexbox, the children control things.
00:04:14
Speaker
But just because the parent is controlling the layout, it doesn't mean it can't be getting input from the children on how that layout should be happening, if that
Dynamic Layouts with Container and Media Queries
00:04:21
Speaker
makes sense. But like with with Flexbox, like it's perfect for navigations, for tags, for things where every element needs to be, or every column that's being created needs to be the size of the element. And then if you need to wrap and you need things to wrap and be different sizes across the different rows that are being created, Flexbox is perfect.
00:04:41
Speaker
But if you need even columns, well, you sort of have to make the children become those even columns. Whereas with Grid, you can just say all the columns are gonna be the same size. But what I've been doing more recently, and this is where container queries can be a bit more useful.
00:04:56
Speaker
And so it does depend if you're using containers, queries or not. You can sort of do this type of thing with a media query as well. But in say the media query slash container query, you can say a size times three using a calc.
00:05:09
Speaker
So you can choose what your column size is going to be. And this is where it works a bit better with a container query than a media query. just because it will really be based on the size of the parent that this the grid is in and then you're just saying like when you get to and don't know you want it to be if you want each child to be a minimum of 300 pixels let's say you could set your media career container query to 300 times three and you could just do that math in your head but for me that doing being able to have the math there makes it a lot easier.
00:05:40
Speaker
And there's always that annoying thing when setting it up is like, oh, I wish I had variables for that. We can't use variables within media query declarations right now. You know, the rules for the sizing, like the screen size and all of that. So like that would make life so much easier.
00:05:55
Speaker
But custom functions are on the way and they sort of are going to probably do that and could potentially be more useful for this type of pattern anyway. I haven't played with them yet. have an idea of something I want to play with and I think I'm going to be doing that shortly. But yeah, it's something that's sort of down the road anyway.
00:06:14
Speaker
And I don't know how coherent I'm being with everything I'm saying right now, but I guess my main thing is I don't think we should look at Flexbox and Grid necessarily as this is the right tool for the right job. I think all of us develop our own mental model for how things work a little bit, but I always want to lean into the strengths of what either one of those can do. So if I want something consistent, I know Grid is going to give me consistent.
00:06:41
Speaker
It's easier to have consistent sizing with grid where the children will fit into the sizes that are being declared. Whereas with Flexbox, it's easier to have the intrinsic sizing coming in and then like where the children have a lot more control and play on what's happening.
Thoughtful CSS Declarations
00:06:57
Speaker
But I think whichever one we use, you need to think if you wanna really make it a content first approach, you need to put in a bit more work than if you're doing it another way around.
00:07:09
Speaker
Whereas if you're doing it from like that outside point of view of, I just want as much control over this as I can with sort of absolute-ish values, I think in those situations, either one, you're probably taking a similar approach.
00:07:24
Speaker
right So if you're going from one, two, three columns with Flexbox, most people aren't doing what Andy does, where he's figuring out a very clever way of doing it that isn't super straightforward. There's thought that has to go into it and how we can make the algorithm do what I want it to do with what I would consider a little bit of a hack. It's pushing the algorithm to the limit on how it works with like the number switching from a negative to a positive based on a calculation and everything.
00:07:53
Speaker
And the same thing with grid, I could do that same thing with grid in actually a similar ish way, I think, if I remember correctly. But even if you're not doing it in that similar way, you know, there that same idea of I'm not just doing it at this specific breakpoint, I'm coming up with a way to try and figure out a breakpoint that's more based on the content rather than the rather than on the size of the viewport and the specific size that I'm picking for some arbitrary reason.
00:08:17
Speaker
And that's always the hard part is like, how do we pick breakpoints for these types of things? And they tend to be somewhat arbitrary, no matter what we're doing. But yeah, that's sort of my thought on that. Is anytime we do want to go more of a content first approach, we need to be very conscious about how we're doing that and give it a little bit of thought, which is fine.
00:08:36
Speaker
And I think it makes more robust systems when we do take that approach. The other thing that I found interesting though, that I want to talk about was when Alex mentioning block as the second option. So grid, then block, then flex, which I do think.
00:08:52
Speaker
that people don't use block enough. The amount of times I've seen sites with display flex declared, changing the flex direction and then doing nothing. And just like, you've just reinvented block layout, but without collapsing margins effectively.
00:09:06
Speaker
And then like, if you're going to do that, why not just use grid? And I know there's some very small differences between display grid and then a flex with a change flex direction, but they're very minor.
00:09:16
Speaker
And for what I usually see it for, there wouldn't be a difference anyway. And they're like, they're not even using gaps sometimes. Like they're just, I don't know why they're doing it. It's just like, maybe it's copy pasting from Figma. I don't know. If content is stacked one on top of the other, you can leave things most of the time in regular flow and not have to declare anything. Cause there are changes that happen when we change layout modes and we just, you know, I think people don't think about that enough.
00:09:41
Speaker
And all of this is to say that I think whatever method you're using, this comes back a little bit to what Andy said is, and he was quoting Rachel Andrew, and I'm going to I don't have it opened right now.
00:09:55
Speaker
I should pull it up really fast because it's the name of his post, which was, if it works, it's right. And I agree with that. I think you can get what you want to do and it works. It's right.
00:10:06
Speaker
So like, yeah, if you did flex direction, changed it and it works for you, then it works for you and it's doing the job you need it to do. But I think that if you're consciously deciding on something like this is why I'm doing this and I'm changing it for a specific reason. And this is it it makes it so the systems you're building are probably going to be smarter and more robust.
00:10:28
Speaker
And you're making just having to make decisions when you're writing CSS is really important. Like sometimes people will declare a width 100 because they want something to be the size of the viewport.
00:10:40
Speaker
I've seen that on the body and the HTML elements so many times when you don't need to do it. Your body is the width of the viewport and it potentially then is getting bigger if you have horizontal scrolling on devices that have a fixed scroll bar.
00:10:53
Speaker
And so like it's really easy in CSS to declare things that don't serve a purpose or that can even cause more harm than what they're causing or they they're causing harm I don't know what I'm trying I don't know the proper phrasing there, but they're they're doing bad things, even though they're sort of you feel like it should be doing there's unintended consequences. That's the word I'm thinking of.
00:11:17
Speaker
you're You're declaring something that you don't need that also has unintended consequences.
Critical Thinking and Flexibility in CSS Development
00:11:21
Speaker
I think it's really important that every time we declare something in CSS, we know why we're declaring it and what the purpose of that is.
00:11:28
Speaker
And that's why we need to see what we're doing on the page. Because I think that's what happens is when somebody does something like setting a width on something where it's not needed, or when they're doing a display flex and then changing the flex direction when they never actually had to use a display flex in the first place. so And I just feel like they're not looking at what they had to begin with.
00:11:48
Speaker
And then so it's that idea of like, okay, I need to change this because what I currently have isn't working. And you see it and you go, no, that I don't need this layout. I need this to do something different. And in those cases, yeah, we need to declare something and that's completely fine.
00:12:00
Speaker
But I think as long as you can explain why you're making the decisions you're making, then you're on the right track and you're critically thinking. And not only are you going to be making good decisions and right decisions and ones that work for you, but you're also going to get better at CSS because you're going to be critically thinking about everything. And then you might do something with that very simple thought of like, this is what I'm going to be doing.
00:12:25
Speaker
And it maybe you notice that one little difference or change that it makes where you go, oh, you know what this would have been better and i've run into situations like that where i used to always use if i just wanted gap i would just do display grid throw my gap on there and i just wanted like consistent spacing right not regular flow spacing that could be different when i wanted just very simple consistent spacing and then i realized that actually there is a difference between doing it that way and doing Flexbox.
00:12:53
Speaker
And sometimes the Flexbox one just is actually the better solution, even though you have the extra declaration in there, because there's a few other little small things that you don't have to adjust afterwards. Because I was paying attention to what was happening and going, oh man, this is annoying that that's happening every time. And then going, wait, what if I tried with Flex and I saw that actually worked better. And so then I learned and now I know the difference between the two of them and or or i I can't really articulate them very well right now. So I don't know exactly what the differences are between the two of them, but I know there is a difference between the two of them.
00:13:26
Speaker
And that helps me down the road when I run into a situation where a problem is like, oh, I remember I was critical of this thing that I did. I didn't work the way I wanted it to. And I tried this other solution and that actually worked better.
00:13:37
Speaker
So maybe I'll try that again. And then that if that happens enough, maybe even change how you've been working. So yeah, I think any way that you want to work can be right. Sometimes things are more right than other times and that's okay.
00:13:52
Speaker
But as long as we're learning and taking thoughtful approaches to things, I think that's where things are the most important. And that's where layouts will make the most sense with whatever method you decide works for you. And there's...
Consistency in CSS Strategies
00:14:04
Speaker
I think one of the things people get frustrated in CSS is there's too many ways to do the same thing. And i think a big part of it just needs to be the consistency with how you decide to work on any given project.
00:14:16
Speaker
And yeah, I think that's it for this week. I hope it wasn't too much of a ramble. I do apologize if it was a little bit incoherent along the way there. But I think I expressed what I wanted to be saying. And I hope you enjoyed it. Again, I'll put links to all the stuff down in the show notes slash description.
00:14:31
Speaker
And with that, thank you very much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.