Flexbox or grid - How to decide?

flexbox grid we have two amazing layout tools available to us when we're writing our css these days but wait why do we have two layout tools well the thing is we all know when we should be putting on a pair of running shoes or dress shoes and it's a little bit similar when we're thinking of flexbox versus grid they are both things that create layouts just like shoes or both things that we put on our feet but they both serve different purposes and they have different strengths and weaknesses so in this video we're going to be looking at the differences between them we're going to be examining them and seeing what situations which one works best so when you're creating your layouts it just simplifies that decision for you and i'm going to give you a little sneak peek it's not necessarily but one dimensional versus two dimensional layouts at least not in the way that you might normally be thinking about it hello my friend and friends and welcome back to yet another video i'm so glad that you've come to join me once again and if you're new here my name is kevin and here at my channel i hope you fall madly deeply in love with css and i can't get you to fall in love with it i'm hoping to at least make you a little bit less frustrated by it and one of the ways that we can do that is by understanding which tool is the right one for the job and we're going to be able to do that today by breaking down flexbox versus grid so let's go and dive right into the code and take a look at them all right so here we are in codepen we're going to look at a few different examples this first example is more just to give us a general rundown on the differences between them and some of the default behaviors and examine a little bit what they do similar what they do different and we're going to break into other examples where i think it's more real-world situations that show where those strengths can come in and ways that you might want to use them and so right here you can see i have a set up here with flex and grid and basically they're the inner workings of each one of these is exactly the same and so i have my flex container has direct children here and we don't even need these commented ones out so let's just remove them and so we have the exact same children in both of these so we can just make sure we're on an equal playing field and so if we come in here on the flex container and we turn on our display of flex it will just make some columns flex does its flex thing and we get a bunch of columns they're sort of responsive they squish they grow a little bit they sort of do flexible things as the name implies they will and one thing that is important to know with flexbox is every direct child will become a column even if that means there'll be some overflow and that means we can get some horizontal scroll scrolling with flexbox when we're not careful with it so that is an important thing to take note whereas grid that won't really give you that problem by default because when you turn it on nothing happens and this is because well with a flex container display flex the default here is a flex direction of row and that means the parent is a row so the main axis is the row and that means all the children inside of it are becoming columns but this is we're choosing our flex container here so we're saying our flex container is a row so the children are becoming columns that's the opposite behavior that we have in grid where grid the default behavior is a grid auto flow of row and in this case it's creating rows and they're all stacking on top of each other so we could actually get a very similar behavior to flexbox by changing the autoflow to column and you'll notice they're almost the same not quite but they're almost the same when we do that and that's kind of interesting you'll see they sort of grow in they they shrink in a very similar way but there's a few little strange differences between them that we're not going to get into specifically in this video but it is an important thing to notice and if ever we do this this is going to lead to that situation where on both of them we are going to run into that overflow at one point because of just how these work and if you are familiar with flexbox you might be going well i can prevent that that behavior from happening but i have a display of flex i don't want any overflow so i can do a flex wrap of wrap and just like that now if things run out of room they're still gonna well they're not really squishy anymore until we get to this point but they do wrap around and they do this wrapping thing instead and i'll get into why they're behaving this way in just a second um but let's go into grid and let's actually change this grid auto flow here and instead of that a similar behavior we could do here is a grid template columns i'm going to do the simple version first and then we'll make it fancier uh so and often the thing you'll often see here is one fr just like a few times something like that which will give us uh in this case five columns and they're just five columns no matter what and they're doing their five column thing and that's it and of course you come on here and simplify that with a repeat of five one fr and then we have five columns or we could do four whatever you need and there we go we get the columns and it's wrapping the content but it doesn't sort of automatically wrap right we have these um they're just sort of we have four columns we're stuck with four columns now there is a cool thing and i'm not going to deep dive it in this video because i've talked about it a lot in other videos and if you'd like any of those there's more in depth flexbox and grid tutorials in the description below but i will remind you about that at the end as well um but with this autofit what you can do is a min max on here and so on the mid max here we give it two values the smallest we want them to get and the biggest we want them to get so let's say they have a minimum size of 300 pixels because why not and a maximum size of 1fr and now we're actually going to see that we get a different amount of columns and they're going to wrap it's not quite like the flexbox behavior but we sort of get that like wrapping behavior as they wrap down and they go down and down and down and then back up this way and this is a really important point to look at this flexbox versus grid and an important two things to consider right now are it's not necessarily about a 1d versus 2d layout like we often hear and that's because if you look at here we actually have flexbox creating a two-dimensional layout in a way up here and then down here we have grid also making a two-dimensional layout and they're doing it in different ways and they have different constraints in different ways that they're creating this but it is important to know that flexbox can wrap and flexbox can do what what we think of as a two-dimensional layout but what's important with this is it's the way that we can control that layout that is one-dimensional and one way we can think about that too is each one of these rows is independent from the next one so if we shrink down to here like this column here we have a very narrow column here we have a big column here we have an even bigger column then we have some like this medium one a big one but like this this column here is not looking at anything above it anything below it this row is independent from the row above it it's independent from the row below it grid does not work that way grid is setting things up in a two-dimensional grid so the columns they're locked in this one only has this little short word in it but that column is stretching to match the other columns around it or when we have three or we have four the column in this row has to be the same as the column in this row now you can do things like span multiple columns but it's still locked into a two-dimensional grid and you can't have these like in-between columny things rows also work this way where you can't get these in-betweeny row things like you might think of in a masonry layout even though eventually that is part of the level three grid spec so we will get masonry layout which will be open up some interesting doors with css only hopefully it doesn't take too long to get there but first we need sub grid because that's the level two part of the spec but i'm getting way ahead of myself let's not worry about that stuff too much right now um but i just want to look at here and sort of the you can think you can already see grids a little bit more structured and flexbox is a little bit more flexible and now let's just let's come on to here and make a quick change but there's an interesting thing is if i do want to change the way things are behaving here a little bit i can't actually do a lot more work here to be able to make more changes to the flex stuff i actually have to come on to the children and in this case i'm going to do a flex container the direct child and select every direct chilled child on there and this is something that we don't generally need to do with um grit unless you're going into like alignment within the cell whereas with flexbox you pretty much very often have to go on to the children and set different things on here and so let's start with one thing that's kind of interesting which is going to be to throw a flex grow on here of one and that's going to break things a little bit you can see like now look at that they're always filling up all their available space we don't go those on you know that jagged edge we had before they're all filling up the available space we could even come on here and say a flex basis of 100 uh actually that's not going to do very much let's come on here and say 33 and that's going to give us three columns but then this last one's allowed to grow so it breaks bigger and then so you get these sort of interesting things here it's you know it's it it's getting too small it's sort of figuring things out on its own um and again grid is just this structured thing it's really relying on what the parent is telling it to do and the children are living within the grid that is being created and what flexbox is really good at and that comes down to like before i set these on here is intrinsic sizing and relying on the intrinsic sizing of elements because a lot of what flexbox does is looking at that and when i say intrinsic sizing i mean how this item is shrunk down to be as small as the content inside of it just like this one just like this one just like all of these they're shrinking down to the size of the content that is inside of them that's the intrinsic sizing uh of an element and there's other ways to have intrinsic sizing but here and then we can you know here at one point they will actually start shrinking because they're running out of room and this is one of those really nice things with flexbox that the default behavior for it doesn't lock it in so much whereas with grid intrinsic sizing there's ways of forcing it in there just like there's ways of fighting against it within flexbox but the default way that it behaves is the grid sets things up and the children in there they fill up the space so they take advantage of that space that the grid is making available to it so what does all this mean when when do we decide which one we should be using and i want you to often be thinking do i want to be relying on the intrinsic sizing of something do i want it to be as big as it is or do i want to have a bit more of a structured control from the parents perspective and so one common thing that we come up with is navigations right and here i've color-coded things just so we can visualize a little bit more what's happening and i just have two identical navigations one's in a header with a class of flex and one's in a header with a class of grid so we'll come on here and we'll say flex and we'll do our nav list that's in there nav list and let's do a display of flex and the nav list is my ul so they all just go next to each other and i purposely put this really long link just to highlight some things here and we can come here and we can do a grid and then choose my nav list and let's do a display of grid if you remember this does nothing right and right away obviously the flexbox solution here just seems the better one right because one line of code sort of got me what i wanted whereas here i have to do more lines of code knowing the strengths of each one of them lets you go down the happy path go down the path of least resistance where you're not trying to fight against what you're using so much and so right away i think you know the flex one look at this look at that it's just working and then we get some overflow we're gonna fix that but we get down to here it's going and then huh okay that's that's actually not so bad right where's the grid one okay let's try and get a grid layout that actually looks okay so we're gonna come in and then well i guess we could do like i showed you before grid auto flow column on here and there we go it is coming but the spacing on these are kind of weird and well you know what we actually do have gap with flex so maybe we could do a gap of 1m here and i don't know if i really mean that gap on this one because look at these big spaces that are coming again default behavior maybe we could play with this a little bit to force the hand but i'm still liking this one better than i'm liking this one and okay well maybe you say don't use the grid auto flow column do that trick you showed before where i did my grid template columns of auto uh autofit and then on there we do our min max and let's just do a zero one fr and you can see see what happens with the zero one fr in here and we sort of go it looks a little bit better but look at this like here we're running into a problem because look at all my columns are actually pretty much the same size now and then this one's like super close it's wrapping on two lines but like look how the spacing is on equal now because of the size of the cells are all the same but that means the spacing is way off and that's not really good and once it does wrap on this or we went to zero maybe zero would be a little much let's try two or 150 pixels maybe just so it does wrap around um and then when they start wrapping it's even worse here right because that's that's kind of terrible and what happens if we wrap again like this isn't really wrapping the way i'd want it to it's really creating this rigid grid system that i don't want whereas up here if i just did a flex wrap of wrap and nothing really changes except now when i get to the smaller screen size it just wraps and it just goes down and it does what i need it to and each navigation item is the size of itself which is exactly what i wanted it to be so by using the intrinsic sizing of each item because i don't really want them to get big and bulky like i see what's happening over here and like the vertical spacing everything is off on this one right and whereas this other one it just sort of works and when i do run out of room they squish down and here i'm actually getting running into overflow issues again this is more narrow than you'll ever see but you know what i'm saying right and so flexbox clearly when we want this intrinsic sizing of things is just so wonderful and we just have these items that we want to go next to each other if one's bigger one's smaller we want to keep those sizings flexbox is just wonderful grid on the other hand we can use in ways and i'm not even going to get into like the big scale layout because often for large scale layouts it's wonderful but one place and i've talked about this before so you might have heard me say this but one place that grid really excels is actually again when we want more of a rigid system from the parent so let's say we want equal columns here and i'm going to do it with flex first where you get a display of flex on something and then it's kind of awkward we get a small column a small column this bigger column and let's throw a gap on there just so it doesn't look terrible and that works um but it takes more work now to get to the next step and again we can't do any more work really on the parent to get these to be equal if i want these to be equal i need to go on to the children then so i have to go into my columns and i have to sort of go against this intrinsic sizing and this is this is really relying this is because of the intrinsic sizing that this one is bigger than these ones because this has this really long paragraph in it and this one has shorter ones and that intrinsic sizing is really getting based on this big long paragraph here so because it wants to be bigger originally even once they get squished and they shrink down it's still going to be bigger than these other ones until i come on here and one common solution you'll see is putting a flex one and look at that now we get some more equal columns and that i mean it does the trick right it's not a terrible solution it solves our problem um even though there are situations where this could actually maybe not solve your your problem if some of these have padding and some don't you get these minor in discrepancies just because of how the flexbox algorithm works and stuff but let's not even worry about that it's just i find like here i'm doing i have to go on the parent on the children it's not that bad but this is also a very simple solution whereas let's let's turn all of this off and let's go look at it if i did a display grid and we'll do the gap as well and then we can just say i need three columns so i just say three columns and then i get three columns and i'm saying they're one ifr each this can result sometimes in unequal columns um especially if there's like long a really long word in one of them and not the other one so it's not a hundred percent of like a matte like perfect solution if you actually did a repeat with min max on these you might get something that's a little bit more consistent but most of the time you're not going to get a super long word or something that might be throwing things off so a simple thing like this will probably honestly do the trick and you just get three equal columns and what i like about this is it's the parent that's controlling it i can throw any children in there without worrying about that at all and it's a really simple solution and again it's pretty much the same amount of css we have three properties here we have three properties here and i guess a little bit more longer because you actually need two selectors for the flexbox solution on this but i just like that the parent is really in control and is creating a rigid layout that i can plug content into instead of getting a behavior from the parent and then have to get the children to behave the way i want them to and i have to sort of make the children in charge whereas here the parent is in charge of everything that's going on so i really do feel that for structured layouts grid is a much better solution and for those times we want to rely on the intrinsic sizing of things flexbox is a much better solution and that's whether there's wrapping or no wrapping here we have wrapping that's going on so more of what you think is a 2d layout going on and again it's because of the flex direction and the control we have that we see flexbox as 1d whereas grid is 2d and where we can control both dimensions on the grid a little bit of a different way but you can make a two-dimensional layout using flexbox and you can make a one-dimensional layout with grid and one thing i want to go to before we get to the end of this before we wrap things up is i get asked a lot about if we can mix flexbox and grid and people seem to think you get stuck with one or the other but they work so well together so here i've set up my grid that gives me my three columns here and inside each one of these i have these guys uh which are my tags so if we just go take a quick look i have my uh this card article that's right here and in there i have a ul of tags and i can just do my display flex and a flex wrap on them and they get them my little cards that show up here and look at that they work and everything just works magically because these i want to rely on the intrinsic sizing of each one of those little tag things that i created and then i want more of a structured grid style thing for the content itself and i actually find that grid is an easier one to get started with even though there's a lot of properties that go on with it they're a lot more straightforward and there's a lot less worrying about it because you're doing a lot less fighting against the intrinsic sizing of things and wrangling what's on the parent and what's on the child but whatever the case is and wherever you are in your learning journey if you do want to get into one or the other i have recently done videos on the easiest way to get started with grid and the easiest way to get started with flexbox and both of those are right here for your viewing pleasure and with that i want to say a really big thank you to my supporters of awesome over on patreon johnny jan stewart 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 own internet just a little bit more awesome

Channel: Kevin Powell

Views: 271,429

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css grid, css grid vs flexbox, grid vs flexbox, css grid tutorial, flexbox vs grid, flexbox vs css grid, web development, css flexbox tutorial, responsive web design, css flexbox vs grid, css grid layout, css layout, css grid and flexbox, css flexbox and grid tutorial

Id: 3elGSZSWTbM

Length: 18min 51sec (1131 seconds)

Published: Tue Jan 18 2022