 Other my friend and friends when we need to have columns we often use a display flex and all of a sudden we get some columns that show up and because of that when we need a layout like this we often go to flex but I'm here to actually suggest that you might want to use display grid for this instead so let's start by recreating this layout here and just let's go this is the flex one that we just the layout that I have here we have three cards in it with a flex parent. And if I go over to this one with the exact same layout the same content the same everything but I have a class of grid here. So if we jump on over right now we don't have a layout but we can go to that CSS and we can recreate the layout that we have here just like that. And if we look at the two of them they're identical. And at this stage you might be saying that it's not great or you might even be saying that the flex one is a better solution because it's more flexible because we can add or remove content from it and you would be right. So just to show you what I mean by that if we come here and we just duplicate this card and we save over in the flex one we now have four columns because it updated on its own or if we delete some and we hit save it just updates and it works which is fantastic. And this is one of the nice things how easy it can work. And right now with how I have the grid version set up we can jump on over to that. If I did the same thing it doesn't quite work in the same way where it ends up creating a new row and putting this down here. So that might be a desired behavior but the nice thing with the flex version is if you have two children you get two columns if you have three children you get three columns you need four children you four columns and it just works. But actually grid can do that too. We're going to circle back around to that though because a lot of the time you don't necessarily need that you're getting a design and it needs to be three columns or it needs to be five columns or it needs to be two columns or whatever you're following what the designer gave you. So in those situations I really do think that grid is actually really really handy. If we come over to here what I'm going to look at is a little change that we can make where down here instead of using this FR because we could replace that with a repeat of three one FR. And now I have three columns and then I could say I need four columns or I need five columns or I need two columns or whatever we need and it's going to be exactly what I'm telling it to be. And again this depends a little bit on the context that you need now the annoying thing is if you do need to make changes to this sometimes it's kind of you know you have to come into this repeat syntax but you don't actually have to do that because we could create a custom property called column count and make it really obvious. Let's go back to three here and then I just put my or we'll break this down on this line and then I can do my var column count right here and I have three columns and then I have four columns or I have one column or whatever we need. And the handy thing with doing it with a custom property like this is then there's different ways we can update it. So I've added more cards on the side just to really show how this is going to work. And what I've done here is I've created some data attributes and these could definitely be modifier classes instead of data attributes if you prefer working that way. But if we come back over to here I have my grid and then I get to say data columns is equal to three and then I get three columns or I want two columns or I want four columns and it just works. And that's really nice and this of course is if you need something a little bit more structured and you know exactly how many columns you want for whatever you're using right here. So like you're setting something that has to live in that situation. But the other nice thing with this is because these are custom properties you can also update them within media queries. So as an example here I've taken off the data columns and I'm just updating this single grid that I've created and of course you can combine these two together. But here we're saying that my grid is set up at one column and then when we have a width greater than 500 pixels we go to a column count of two and then a width greater than 900 pixels we go to three. So we can see that's perfect right there. And then we go down to two columns and then we eventually get down to one column there and I should probably maybe update this to be 600 instead just because that was a little bit narrow where it was switching over. And there we go. We can see that it is working. And so that's a sort of a nice way to work that can easily adapt and this is sort of nice again if you have a designer that's given you a specific size. This is that you need to be working with and you just want to follow what the design has and you want to have a sort of a set grid that just works. And of course we could skip this middle one right here and just have it go from three to one and there's no issues with that. That would also work perfectly fine. We have three and we jumped to one. You just probably want to adapt where it's happening at because it's probably a little too wide. So maybe this would be at like your 750 or whatever. But you do it based on the design that you have and you can just sort of skip from one to the other. And this is one of those areas where Flexbox actually has a little bit of trouble working and you can force it and you can get it there. You can see here I've updated the Flex one that we were working on. We have six here as well. And the issue with when we do it with display flex is I mean flex is great because it's going to adapt and it's going to shrink down to try and fit the content that's inside of them. And that's awesome. But there is the downside to how this works as well because if I come now and we say that we want this to be my flex and we're going to select all the children. And we're just going to say flex basis of like 33% because I want it to be three columns. And by default they're shrinking so there's still you can see sort of something happened but nothing too much. But we want to say that it's around 33% because I want three columns like we were doing with the grid. Well let's come here and do a flex wrap then to get that same behavior going on and I only have two columns. That's weird. Why do I only have two columns and that's happening because we have 33% plus 33 plus 33 or 99%. But then we have this gap of one REM that would be coming between them and it doesn't fit. So we actually have to like drop this down to I think it's like 29 or not even look at that 20 say 28% or something 25. There we go. Eventually and depending on what you have here it's going to be smaller than the container. So you'd probably also want to do a flex grow of one on there just to make sure they're filling up the container since they're getting too small. And then you could take this whole thing and shrink it down to be a flex of one one at 23 was it percent. And you get the same type of behavior because we have a flex grow of one. So they're growing like shrink of one and then the percentage here and you get that going on. But this number is really weird when we wanted this to be three columns right. And imagine you wanted four columns you would think 25% but obviously it's going to be a lot smaller. You know I bet you 20 won't even work. So like it becomes very magic number and I'm sure you could use calc and get something that would work that would eventually be similar to how we have that column count property that we had at the top. But it just becomes like a lot of work to figure out when you could just say I want to have a column count of two or a column count of three and it works. Now this does illustrate one thing with Flexbox though is this can happen which with grid depending on how you have things set up you might want this type of behavior or you might not want this type of behavior. If you do not want it then grid is the way to go. If you do want things to easily adapt and stretch across spaces when it's available then Flexbox is definitely the choice for you because it's it just works in Flexbox. It's always choose the thing that works easier. But I do think that often for even these simple layouts and it's what I'm trying to show here is that it's a lot easier and a lot clearer with grid than with Flexbox. We can see here Flexbox is sort of doing some automatic adjustments which is nice and let's even take that back a step to where we were before by coming back down here. And we're going to remove that and go back to this and I'm going to take this wrap off to so it behaves a little bit better. And we're also going to update this back down to just three and this is sort of that nice area right where Flexbox adapts but what the heck just happened here. And this is happening because the middle one has more content now than the ones on the side. So I updated that when I updated things before and if we didn't have that if the content is the same in all of them then we get three equal columns. But if you have more content in one of your flex items it's very possible something like this happens and it might not be this exaggerated. We sort of are pushing the limits here to make that happen and you can fix this 100% you can just come here and say once again we have to select the children and then say the flex one or there's there's multiple solutions. This one works where it gets them to balance out but if we take a look at the same thing with grid so we'll go back down to the three columns just so it's the same and you see I didn't actually change anything. We just have the display grid and we have three columns the content is different but when we come and take a look at the CSS we're saying because we're in this media query column counter three it's just three and even let's simplify that and just say we only want that here right now. And so you get these three columns like that and if I want this to be two it's going to be two and so on so this is one of the nice things with grid but that does raise one potential benefit or sort of saw before that flex is more flexible. So the annoying thing here is if I take a div here and I duplicate it and then it goes down here and I don't want that to happen maybe I just want it to create a fourth column and then a fifth column and then a sixth column. Well, flex box as we've seen is really good at that if I duplicate hit save we have four columns if I delete some stuff I have two columns and we don't end up in this awkward world where we have either an empty space or we have you know one dropping down here. Right and even if I came here and I deleted two of them then we have an empty side here and that can be a little bit annoying, but grid has a really nice solution to this that I think is actually more flexible than anything you can do with flex box without a lot of work. So I'm going to jump back up to having for here and let's come over to here and look at our grid and I'm going to remove the column count from here and we're going to have another custom property for this one. We're going to stick with this but I'm going to change this over to auto fit and I won't lie this one's a little bit long a little bit if you haven't seen me do it before. There's quite a bit that goes into it. But luckily because we're going to set it up with a custom property it's really easy to understand what's happening and it's also really easy to update and we will compare it to how we can do with flex box as well because there's a trade off between the two for sure but before we get into all of that just really fast. I'm going to say the custom property makes it very readable, but setting it all up may be a little bit hard to remember at the beginning. So I have created a cheat sheet that looks at the different layouts we're covering here with grid and I've also included two other layouts that I've covered in previous videos as well. So you can find a link to that cheat sheet down below. There's a full color version and a black and white version if you do like printing things off with that let's let's jump back into here and set up this so auto fit is another one of those grid specific things just like the repeat syntax. And we're going to throw another one in here which is the min max. And so I understand that this can look really weird, especially if you're new to grid like a grid so complicated there's all these new things there's the FR the auto fit repeats min maxes and there's more. Honestly if you just take this and only use this you're probably fine and again just use that cheat sheet and you don't ever have to really remember it once you wrote it like four or five times you're fine. So here what I'm going to do is put up for now I'm going to put in a pixel value and then I'm going to one FR. And basically what we're saying is this is the ideal size for our div. It's a little bit like saying like this is the flex basis in a way if you used to flex box. And so if I get bigger we're going to go to three columns and mine's not set up to go any bigger than that. But then if we shrink down we go to two columns and eventually one column without any media queries without having to worry about anything. And actually let's make this a little bit smaller so it's at 200. So we get three columns right and then here it's going to jump up to four and then if we shrink down it's going to eventually once again stack and the whole thing just works. And the nice thing with this once again is if you come in here and I remove some of the content so I take out two cards well we get two columns just like we were getting with flex box. We go up to having three and we have three columns we go to four and then we have four columns. Well we don't have four columns that we have four elements but this is a good thing because one thing that always drives me nuts with flex box is you have two. Right so we come here and then we can duplicate that one and we end up with three and then we can let's just duplicate this one in between so it changes and we have four and that's looking okay. But then as soon as you go to five well actually I sort of want one of these to wrap down below because this is a little bit nicer looking then these all smush together right. So that's it's kind of nice that here it just works and it just flows and I'm doing it all with basically three lines of CSS because I could sort of replicate this behavior a little bit with flex box over here and let's do that and we'll see the difference. So we sort of want to keep this coming we do need to put a flex wrap here once again so we'll put that back on and we do need to put that size. So here I'm going to do a flex one one once again for a shrink and a grow and then I need to set a size and we were doing 200 pixels before so we can set that and this becomes the ideal size here the ideal width. And so in this situation if we have let's just take off these bottom three cards if we only have two it works and then if we add another card on here hit save it's working take another card on there. It's working and it's coming down below a lot like what's happening here but there's a very distinct difference obviously whereas this one is living in the cell right here. Whereas this one is stretching all the way across and like sometimes this is the desired behavior that you want and then you go up to five and the five works. And it's stretching across both and because flex box the rows are independent from one another you can get this where it splits this in half and maybe that's what you want because in grid you're not getting that you're getting the item that's here. And if we duplicate that when we hit save it's going here we could actually force some of these to span and there's creative ways of doing that. I don't want to look at like hacky things and creative ways right now because I want to look at just keeping things simple and using the simplest approach to what you want to do. And so if this is more of the type of layout you want then grid unless you set this up with more than three columns and then you're using spans and all sorts of weird stuff to get it to work well flex box just works better. So it's not that you shouldn't use flex box you should use it when it's the simpler solution or when it gives you what you need to use. But when we come and look at the CSS like I don't know just for me having to have the two selectors here I just like coming in and having this. But again it does depend on the layout that you want to be using as well because there's a clear difference between the two of them. If you did enjoy these though and you do want that cheat sheet don't forget it is linked down below in the description. And with that I would like to thank my enablers of awesome James and Rico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support. And of course until next time don't forget to make your go on the internet just a little bit more awesome.