2 common CSS layout misconceptions

Key Takeaways

Hello, my friend and friend. Despite just passing a thousand videos here on YouTube, which is kind of crazy. And despite being tantalizingly close to 1 million subscribers, clearly there's still not enough people watching these videos because there's a lot of CSS misconceptions that are out there. And this is on like a whole range of content. But today, we're going to be focused specifically on a few layout related things that people just don't seem to get and it leads to them struggling more than they have to. And we're going to be starting with one looking at the Flex one shortor shortand. And the reason for that is I recently put out a quiz here on YouTube where over 4 and a half thousand people answered it and only 9% as of the time of recording this actually got it right which is kind of embarrassing everybody. So let's dive in and take a look at what's going on here where you can see I have a very simple thing. I have a flex container div there div there div here and that's it. And a very common thing to do is to say flex container select all the direct children and do a flex one to get equal columns. And it works right. It gives us equal columns sort of. It doesn't actually right now. We'll talk more about that in a minute though as that's another misconception. Um, but when we're looking at this, uh, and I I guess before I say the answer, I want to say that there was a comment on that quiz of someone saying, "Does it really matter if we don't understand the technical reason that it works if it gives us the required result?" Cuz kind of if you look at the results that were in there, like any of them, you could make an argument that maybe that's actually the answer. But I would say yes, it's actually very important for a reason. That sort of leads us to that that second point I was going to make. Uh but let's go and see what this flex is actually doing right now. So if I come in here and I grab any of these uh divs that are the direct child. Uh we can go and pull up our dev tools here. And I can actually see here the flex basis is at a zero. Let me make that bigger just in case you're on mobile or something like that. Uh and so yeah, the the flex basis there is at 0%. Um that's the computed value for it. It's it's going to zero. Uh and that's kind of interesting, right? Why is it going to zero? And this is just how flexbox calculates the size when we use a flex one cuz what it's doing is it's going we're making the flex basis zero but we're putting a flex grow on it. So they're all going to the same base zero and then they're growing from there. So the idea is let's just put them all to the same base and then grow. So that means they should all become the same size. And for me, this was a really important thing when I learned how this works because as I said, by knowing this, first of all, I was able to do, oh, that's kind of I get it now. I can manipulate things a little bit and and do certain things with flexbox in certain situations where knowing that is useful. But the most important part of this actually that came up was in learning that I started learning a lot more about flexbox. And it turns out that when we use this, we're not necessarily getting the uh equal columns that we thought we would because right now they visually look basically equal. But I'm going to grab my inspector guy here at the top of the page. And if we look with this one's a width of 342 pixels, which will be the same as this one here, 342, which will be different from this one here, which is 406. It's bigger, even though we're all going to the zero and then growing from there. So they should all be the same size because what flexbox is actually doing is it's going, okay, this is zero. This is zero. This is zero. I have this much space. I'm going to evenly distribute it because they all have the same growth factor on there. Except there it's looking at the content box of each one of these. So it's actually if we have here actually we can see there the content box is 342. Uh and even I'm on the paragraph now, but if we go and grab the actual div, which is sort of hiding away a little bit, we have the 342. So all of the content boxes of these three divs are actually the same size. And that middle one is getting the padding added on top of that. And that's not because I haven't declared a box sizing border box. That will not influence things at all. Uh box sizing border box. It doesn't actually change this behavior. And this is a good thing it doesn't do that because if it did change the size here, that would mean that the padding would actually be getting shrunk down too because it would have to be shrinking all of the box model related things. and or or grow them or whatever is going on. And that would be a nightmare because then every time you're using flexbox, your margins and your padding and your borders would potentially be growing and shrinking as well. And then nothing would be consistent and everyone get be much more upset. Uh but this is actually one of the reasons that I prefer using grid for this type of layout. Uh so we can keep that. Let's just come here and say a grid container instead and change this over to grid container. And then right here I can say this is a display grid and a grid temp or you know what we're going to mimic flexbox behavior with an underused property which is grid autoflow of column. And then if we take a look at these actually at the beginning they're all going to be different sizes as well. I was going to click on them but we have a 363 a 425 and a 366. And this is working when we do it like this very much just like the default way that flex would do it until we do that flex one trick. But now what we could say is a grid auto columns. And this isn't the only way you can do this, but we can just say that it's a grid auto columns of 1 fr. And those 1 frs will give us the same size including the padding on all of these ones. So once again, let's just go and take a look at the divs. The first div is 384. The second div is a 320.9. You can see the 972 stays the same. Here we have a 320, but then we have to add the 32 plus the 32, uh, which would give us the same size. And then we have the last one right here which is again the 384. And so we actually visually get the same uh size for each one of the columns. And I think a lot of the time people would do it maybe a grid uh template template columns repeat 3 1 fr whatever it is. However you're doing this uh to be able to create your columns. It's the same type of idea. If you're using the FR there it's going to work and actually give you some equaliz columns. I want to go over to grid in general. And grid I think is something a lot of people have misconceptions about. Uh and this is a post I put up uh a while ago asking about why people sometimes have a hesitancy to use grid. And I always heard that it's because it's too complex. There's the other problem is there's lots of unique properties and I get that it's you have to remember more stuff though not necessarily as we'll see here too. Um but this type of layout this was like a famous layout. This is the holy grail layout and this is a really famous layout that became easily possible when fu uh when grid came out became possible with flexbox as well. Uh and if you go to the old days of the web, this type of thing where it was three equal height columns was like really hard to do uh in the ways of the old web and then you can just now things stretch and it works and it's fabulous. Um, but I think what happens is you see lots of the early tutorials that were looking at things like this and they're teaching how grid works. So I don't blame the tutorials because it was about like these are the different features of grid that you need to learn to use it effectively. But you'd set up a grid template rows and a grid template columns and then you'd assign all the different pieces along the way using grid columns and then yeah it starts becoming complex. This is a lot of declarations to put together and people say I could do this a lot easier with flexbox by not looking at the big picture. Uh I'm going to argue we could do this layout so much easier with grid than we can with flexbox. Uh but before we do that, the main misconception I think that or I think this like seeing parts of this make it look much more complex than it has to be. So the first things that I would say is that if you're seeing these or you feel like you're every time you're seeing a grid like this and you you're looking at the big picture and you're all these things start coming in. This is annoying too if you want to make it responsive, right? Uh let's let's do that first. Let's come in and actually make some of these inside of a media query. Uh so maybe we'd have the holy grail and then I'm going to nest this uh and say we have an at media of a width greater than 900 pixels. And I'm also going to talk about grid areas as well because this type of layout works nicely with grid areas to be honest, but it's still maybe needlessly complex. Um, so we say width greater than 900 pixels. And then I could bring these two into here. Uh, but then this is kind of weird because even though I'm only declaring these here at the smaller screen size, it sort of causes some problems now because we don't have the right things that are being created. So actually maybe this needs to be here. Would that make it work? Okay, that's better. But why do I still have three columns if I'm only creating the columns here? And it's because I'm assigning them to rows even though I haven't created the rows. So then maybe you're coming into here and you're saying like all of these are actually going to going to be like a 1 over3. Uh so there are one over two and then you can rearrange them here. And it is kind of weird and complex and stuff. The first thing I would say that we shouldn't be doing uh there's a bunch of declarations here that are useless. So this here, this here, and this here, I wouldn't bother with them because watch this. Let's go to the larger screen size where we have the layout being defined with our three columns. And like this is the natural flow of these anyway. If I don't declare these, that's where they're going cuz that's my first element. Then the second element is going into the second cell. So it's going over here. Uh just cuz this is spanning across the top. Then the main content is in the middle cuz that's just the natural flow. Then the right side goes into the next one. And then we're footer goes to the next cell and then we're telling it to go all the way across. So it goes all the way across. The problem now is at small screen sizes, we're still getting a bunch of columns because this is creating these extra columns that I don't actually want. But we could actually fix this by using the negative one syntax here instead. And by having the negative one on there, all of a sudden the layout works better. Everything stacks. there's one problem um which would just be here. I would probably do an auto auto 1fr auto auto. So the 1fr is the main content which is stretching the whole size. And then I could just take this grid template rows and redefine it here where we get rid of the extra ones that we don't need. Uh and then we've simplified things a little bit because we just have them going that way. And all I'm doing is saying the header and the footer should span across the entire thing. And the negative one just means you're counting backwards. So you go to the very last column and then you go the other way. So anytime you want something to span from the start to the end, always just put the negative one and then it doesn't matter. If you have one column, it will be one column. If you have four columns, then it stretches all four columns and it won't implicitly create new columns and make you have to redeclare things and position things and becomes really annoying. So I'm just declaring my rows for when I only need rows. But despite this and like okay I think this is much simpler but I think it's actually still a little bit more complex than we need. Now we can come in and sort of make this easier I find with grid template areas. So here I've done that where it's exactly the same thing with my auto rows. And what I like with grid template areas is I don't have to worry about any definitions of where things are. I just say like you live in these areas and they're assigned to that area. And then with media queries and other things, I can just change the setup of those areas and the pieces will go into where they need to go. So I never have to if I am changing the layout through a media query, I never actually have to go and find those elements again. I just have to make sure that my grid template areas are well set up and it's going to work and there's no problem. But still, I think we can simplify things even more. So, we're actually going to go to a version of how someone would do this with flexbox cuz that's always the argument is it's easier to look at it with flexbox, but that's with with flexbox. There is something we'd have to do. We have our page layout and then we'd have my header that's going to stretch the whole size, the footer stretching the whole size. Then we'd have to come in the middle here and we'd have to add something to create the inner structure for that main part in the middle. So, no problem. We can come in here div class is equal to maybe main content we'll call it and then we can close that div over here. So with that we have the page the the main page layout uh and then so for that page layout we actually we could use we have the min block size. So I could on this actually do a display of flex on here uh and then do a flex direction of column and then we can go and select that main content part. So we can say here our uh main content and we can say that has a flex grow of one on it. So we've enabled growing and that will grow and it's pushing the footer down. So we have the sticky footer at the bottom of our page. Fantastic. Then we have to handle the inner content. So no problem. The nice thing with this is we're sort of separating things, right? We have the main layout and then that's we're just worried about how that main layout's working. We get that working. Now we go into this sub layout, let's say, or an inner layout and we just worry about that. We don't have to really worry about how they play off of each other. We just worry about them more in isolation, which definitely simplifies things. So, I get why people prefer this. So, we say that the uh we're here. So, here we could say this is a display of flex. Uh okay. So, that's okay. Maybe we're going to say that the left side and the right side both have a flex basis of 200 pixels cuz that's what we had before. So, it sort of sets a size on them. And then we could say that the main that's inside of there, the main also has a flex grow of one. So it ends up taking up the rest of the space. And we're back to what we had before. And of course then, okay, okay, well, we need a media query on here. So no problem. I don't even have to worry about my outer layout cuz the outer layout's always working. It doesn't change. I only have to worry about the inner layout. That's a little bit simpler for sure. So then we can come on the uh here and I could say that this is a flex direction of column again. And well, this is kind of weird because I've changed the flex direction, but the flex grow on my main doesn't seem to be working the same way it was working before, which is kind of weird, but that's because I put a flex basis down here. Okay, so instead of flex basis, cuz when we change the flex direction, the flex basis actually switches with it. And they're now getting a height of 200. So, okay, we don't want that. These should actually be a width instead of a flex basis. Even though when I think of flexbox, I probably go with flex basis as a default. But anyway, I sort of fixed that. But that kind of broke things here. So, how could I fix that? Okay. So, what we're going to say is we're actually going to say this is only if it's at the larger size. So, media width is greater than 900 pixels. And then we could wrap this all in that media query. Okay. So, then at this size, they're fine. And then we get to the larger size, we're going to switch it. So here too, I'll put another media query of a width of greater than 900 pixels. And then we can wrap that. So we're only changing uh actually no, sorry, I was going to wrap that, but we're going to switch the flex direction. So this becomes a flex direction of row over here. Let's fix our indentation cuz it's very ugly right now. And there we go. So at small sizes, it's stacked. And at these sizes, we're back to here. Exactly what we had. And I was sort of exaggerating a little bit on the back and forth and other things, but this is always my main issue with flexbox is we sort of have these two things at play. We have the parent elements that are sort of setting things up. And if this is all you have to do, then you're fine. It works beautifully. Uh though this is sort of the default behavior of grid if you don't actually need columns. Um but then here like we do need to say that this middle one is growing though. So, we have to go on to the child to say what the child is doing within the layout that controls part of the layout. And then here I'm setting things up, but then I have to also set up some things on the children. And then I end up with these two media queries or you, you know, this could all be one media query, but then the main content needs to be down here. So, we're splitting styles a little bit. It's not that it's overly complex, but there's a lot of different pieces that need to work with each other to get this type of thing to work. So what I would actually argue is the simplest solution is to keep this approach of splitting this up into two different pieces where we have a main layout and then an inner layout but do it with grid instead. Right? So I'm going to start by coming up to here with the the big part and we'll work our way back in. So here instead of a display flex I put a display grid and then I can get rid of this declaration. By default they'll stack and well it's it's working. Uh the only problem is they're all with the auto rows. They sort of balance each other out. If there was a ton of content in the main area, this might not be an issue, but same with the flexbox. It wouldn't have been an issue there necessarily either. Uh but then I can come in like we saw before, grid template rows of auto 1fr auto to give us the sticky footer down at the bottom. And that's essentially the same as what we had before with the flexbox. Then I can come on to my inner layout of my main content and I don't need a flex grow on there anymore because it's growing because it's always going to fit the cell that it's inside of. So I don't have to worry about adding that in. Then here I can do a display of grid and then I get my grid. So a grid content is always stacking. Maybe I'm going to take this same grid template rows and apply it here just so the main content again fills up all of the space. And then I can actually delete this because I don't need this anymore. And I'm also going to come and delete this because I'm not going to need this anymore either. And over here I can say that when we don't need a flex direction change, obviously what I would change is I take my grid template rows uh yeah the rows. And we're just going to do a single auto. If you left it like this, I don't actually think it would cause a problem. Uh, and then here we do a grid template columns and we're going to set up the 200 pixels 1FR 200 pixels. And then at the larger screen sizes, we get back to that original layout we had. And if we come take a look at the CSS on this, like this is everything we need right there, right? And for me, we've taken that approach you might think of with flexbox of having the two different sections of this, the outer layout and then the inner layout in there, uh, and use it. And this is I think one of the big misconceptions that people have with grid is they feel like when they're using grid they have to make the big layout from the outside and assign the line numbers and do all these different things when in reality you can just do this and it works great like it just functions and there's I don't know for me that's great and this is how I would tackle this problem. I wouldn't be doing it with the bigger layout personally. I would be taking this type of approach and I love this cuz I don't have to select the children to do anything. I don't have to assign line numbers to anything. I don't have to use grid template areas. I've used grid template rows and grid template columns. And this can achieve like 90% of the layouts that you're creating with grid. And this isn't to disparage flexbox at all. I use flexbox on basically every single thing I'm doing, all my projects. It's just I think that there's a lot of layouts that people are using flexbox for, thinking it's simpler when they could actually be making even easier to control versions of it using grid. And if you are interested in that CSS uh grid workshop that I'm going to be doing, do check the link out in the description. And with that, I want to thank my neighbor of awesome, Johnny, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.