Stop the Flexbox for 1D, Grid for 2D layout nonsense

hi there my frontend friends we need to stop with the flex box is for 1D layouts and grid is for 2D layouts nonsense and today I'm going to look at why and I'm also going to use this video as a way to help you out so if ever you have a friend or colleague that tells you that's what they're for how you should be thinking about it or if you see somebody posted on social media you don't have to tell them they're wrong you can just send them this video and let me tell them that they're wrong instead and let's dive into why with a few different examples that I have right here so at this top section here I have the grid and then I have the exact same content with the flex there and I put different colors on them just to make it easier uh to know which one is which so coloring things isn't the necessarily the best way to distinguish stuff um but you know we have top and bottom too so uh let's come first on the flex one which is the one on the bottom so dot flex and then you do a display Flex right and that gives you columns uh right there and these days we can also do a gap on there to make it look a little bit better and then I get three columns awesome so you know that's a 1D layout and that's what people always say you should do but we can come and do the same thing on our grid and the grid takes an extra line to actually get this to to look decent so we can say uh we need this to be a display grid as well except when we do that nothing much happens then we do the gap of one R but they're stacking and first of all there's a 1D layout just going to say uh this is something people use flex box for and then they change the flex Direction I can keep it onedimensional this way with grid uh easier so there's a one-dimensional layout that grid is very good at but then if I want that to be columns I can say that we have grid template columns here and then I'm just going to do a repeat of three columns 1 FR so we get three columns uh and there we go we have a onedimensional layout with grid you'll actually notice something though that the grid one is equal columns whereas the flex box one isn't notice the middle one here is narrower so like right away that's a win for Grid in my opinion and we can fix that with flex cuz then I can come on the children so Flex select all the children the most common solution you see here is a flexx one though there's other options and then it makes them all the same I don't know about you I prefer doing it all in the parent and having three lines instead of having to come in with another selector and putting that on there and I bet you you've used this but do you even know why that works I have a video that breaks it down if ever you want to understand what this is really doing but I think it's one of those things that a lot of people just do without thinking about it uh to get the result they want but there we go we basically got the same layout for our Flex in our grid uh and personally I prefer this one I mean you could whatever it's not a huge win but I just want to show that grid can create a 1D layout really well now you might be saying there's an advantage with the flexbox version and that we could you know I could duplicate one of the divs in there and that's going to go up to four columns whereas in the grid version of it if I duplicate one of them we're not going to go up to four columns we're going to get a new row because I've declared that we should have three columns and that just means new content will come underneath we could actually get that same Behavior coming from grid uh where instead of doing a grid template columns what I could do is a grid autoflow of column and now it's automatically going to flow the same way that grid does if I add more content every new piece of content I add is going to add a new column uh and that's you know it works really well this potentially could run into the same issue with unequal columns that we had when we were doing it with our Flex box before so the solution there is to say that the grid Auto columns are 1fr uh and now that should more or less solve the problem now there is the possibility that it's smaller screen sizes you do get a little bit of inconsistency just because it's going to make sure that things don't shrink too much uh so if you have one really small one it might get smaller than others but you could run into that same thing with flexbox as well and again grid is really good at creating these 1D layouts in other directions like I mentioned before so you could actually take that off and have the display grid so they're stacked 1D layout even spacing between all of them and then you could come in with your media query or even a container query so we could say our Min width here is I don't know 650 pixels for demo purposes uh and then our grid gets the change in Direction at a specific size and so that way at small sizes it's the stack layout and then we go to columns at larger sizes again you could do this with flexbox I actually find it easier to do with grid and I know there's a little bit more control and I don't have to worry about selecting the children and getting specific things to happen um I just for me it makes more sense when I need consistent layouts with all the same size that's really what grid is good at whether it's a 1D or 2D layout but right now I've just been talking about grid and why grid can be very good at 1D layouts and I'm going to stand by that and I I do find it easier to work with most of the time uh but there are times where it can do 2D layouts but flexbox can do 2D layouts as well and this is really what hammers home to me the difference between flexbox uh and grid so in this example we've inverted things flexbox is on the top grid is on the bottom um but the grid layout is always going to be more of a grid it's this locked in thing like this where I can have multiple columns and I can make it responsive I'm using uh Auto the repeat autofit Syntax for this and if you want to see the code for it it will be linked in the description uh but it's you know I have a responsive grid going on so we don't have any overflow issues or anything like that but every column and every row is locked in with the other one because we're creating a grid and then placing content within that grid the parent is in control flexbox you can make 2D layouts we just have a flex wrap on there right Flex wrap uh I don't have anything else going on I just display Flex Gap Flex wrap and this is what Flex box is amazing at and you can't really do this with grid where you get these intrinsic layouts where the children are controlling what the layout looks like and the rows are independent from one another and that's where the 1D versus 2D sort of comes in more where grid you have the control on both dimensions at the same time whereas with flexbox you're letting go of the control in one of the two directions a little bit because all the rows are independent from one another and all the columns are independent from one another everything's just being defined by the size of the child this is great for things like navigations or tags or anything has little pills or small things that just need to go next to each other and just be as big as they need to be that's all about the intrinsic sizing find the size that it needs to be live with that and if you need to wrap you wrap and that's awesome but we have a 2d layout with flexbox and I think that if you all of a sudden are going no it's 2D it's going to be grid well then you're going to get stuck with something that looks like this when flexbox would have been the better solution the same way that you might say that it's a 1D layout I'm going to use flexbox instead but grid might actually be the more intuitive one where you don't have to do weird stuff like this to get even columns cuz grid will just make even columns and the content will just live inside of them and actually want to show one more thing I didn't even plan on this let's go back down to having three columns for this so I can delete that and then I'll come up here and just delete these ones here uh and we go back to having three columns and what I want to look at here is let's select the middle one in both of these so we can just say uh section inside there nth Child 2 let's give it an outline for now Outline Three pixels uh we'll do dotted red or something just so we can actually see it maybe yellow uh let's do five pixels dotted yellow I think it a stand out a little bit better so we've selected the middle one right there and then on that let's give it more padding padding is going to be two Ram uh and watch what's going to happen here notice the middle one got bigger with flex box and that's another Advantage with grid with grid you have that control coming from the parent uh and you might be saying that's from the box sizing border box or something no it's not coming from that I never declared it so we can do it box sizing border box it's not going to change there either because when the the way the flex box algorithm works it's looking at the content size regardless of anything else you've done it looks at the content size to figure out how big things are be going to be and then the padding is added on top of that so if you have inconsistent padding it mucks everything up whereas with grid you're setting up the cells and you're placing content in the cells the parent is in control the solution to this is here I have these divs with the paragraphs and that's you know the common thing where you end up with like call time three that's your column for each one now that's mucked up my entire layout there so I'm going to delete these but then you're taking that content and putting them in each column but then you have a column then you have the content in the column or you could just use grid and keep everything a lot simpler so yes you can do a lot of things with flexbox that you can do with grid there's definitely some overlap but if you need consistency and simple things whether it's a 1D layout or 2D layout if you need that extra control and consistency grid is amazing and if you need to let the layout do more of its Things based on the content and you need more intrinsic behaviors going on where the browsers just figuring out how big things are going to be or you're trying to get wraps to happen at specific times based on minimum widths or other stuff like that then Flex box is definitely your friend and that's regardless if it's a 1D or 2D layout because Flex wraps are amazing and create 2D layouts and there's definitely ways where you can make grid based on intrinsic sizing and you can do more extrinsic stuff with flex box you're setting more rigid sizing and everything but then you're just fighting against the way the tool wants to work and there's always going to be a couple of use cases where you need to do something like that but this is like that first step of which one should I use in this situation flexbox or grid you know start with doing it the simplest way and taking the path of least resistance and then when you get into those edge cases well they're edge cases and they're always going to be something that pops up along the way and I do know that one thing that also happens with grid is that grid feels complicated and people have some resistance to learning it even though I haven't done a lot here but things like okay I had grid template columns now I have autof flow and auto columns and then there's other stuff and there's new units like FR and there's new functions and it can feel a little bit overwhelming but like 90 to 95% of what you do with grid will actually be relatively simple and so if you'd like to know how you can get started with grid I have a video right here on the easy way to get started with grid that covers the basics of it and doesn't go into all the extras that you don't actually need to know when you first start with it those can be really powerful but you definitely don't need them from day one and with that I would like to thank my enablers of awesome Andrew Phillip Simon and Tim as well as all my other patrons 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

Channel: Kevin Powell

Views: 19,864

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial

Id: vO-1eseQ-kc

Length: 10min 22sec (622 seconds)

Published: Wed Jul 10 2024