 Hi there my friend and friends. Most people come up with simple ways to help them decide when to pick between Flexbox and Grid, often relying on the 1D vs 2D in ways that I don't really think should apply, and this often leads to one of the layout issues that I see most often on my Discord server where people are often trying to force Flexbox to do something that would be easy to do with Grid, or use Grid for something that would be simple to do with Flexbox. So I have 5 layouts that I'm going to present to you, and I'm going to let you know what I'd pick for each one of them and why I would pick that, but for a little bit of fun, you should probably pause before I reveal my answer to see if you would pick the same thing as me or not. And while you might disagree with me on some of these, I also asked these same questions to my Discord community a few weeks ago, and I've got the breakdown of what my community used for each one of them to help get a general consensus of what the most popular answer for all of these is as well. And if you do want to follow along, what I'd actually suggest to do is to come to this site right here, the link for it will be in the description, because this is where all the challenges are, and there's the challenge that says what you need to do, and then you can run the code pen, and if you want to edit it, you just click the edit on code pen button, and you go and you try and complete the challenge. And all of them should take you probably pretty fast. The first two are probably, I don't know, two lines of code that you might need to complete them. And as you go through, it gets a little bit more complex. So if you want, hit pause and go and do all of the five challenges and then come back. Or if you'd rather just see what the challenge is, maybe pause it before I give the solution and then we can go from there. And as you would expect, most of the time you would start with challenge number one. But there's a reason I'm going to start with the second one, then we'll move up to the first one. And so the idea with this one is you need the meta tags to go next to one another. So if we go and take a look at what I mean by that is here, we have these tags that are over here. And basically, we need to do something to get them all to sort of go up one next to the other instead. And the reason actually that I decided to do this one first is because every single person in my discord community had the same answer. I think it was 43 people in total there. And I completely agree with them that this is the right place to use a display of flex. And when we first do that, you can see it does work. And with flex, you probably want to add in a little gap there. I'm going to add a gap of one rem just to make it a little bit bigger. And everything works pretty well. And I'm pretty happy with that. The other advantage with flex box is if we did, you know, we squish it down and we do run out of room that we can just throw a flex wrap of wrap on there. And then instead of getting all sort of weird and squishy, they will just wrap underneath. And it looks perfectly fine. One thing if you are doing a wrap, you'll notice that even though my gap is the same in both directions, I probably want the top one to be a lot smaller than the one on the left and the right just because it makes it look a little bit more balanced, maybe 0.25 is a little bit small. But we can do something like that. And it looks pretty good. And I'm happy with that. And this is what flex box is really good at because each one of these, even if email is a short word, free text and options is a long word, they just sort of become the length or the size that they need to become. And flex box is a perfect solution for this type of thing. But now things get a little bit more contentious as we move into the next one here, which is going to be the first one that I mentioned. And so for this one, it's fairly simple. All we wanted to do was make it so this text would go next to the image. That's it. So if we look here, I have this product class there. And I have an image. And then I have a div. And I'm guessing at this point you already have an idea of what you want to do. And I'll share first what my Discord community had, which was almost everybody doing a display of flex and probably throwing a gap on there as well. Just to space them out because look at that, it works perfectly fine. Now there were 11.9% of the respondents. So basically 12% of people, which wasn't too many, but some people did go with grid instead. And I'm actually sort of in agreement with the minority here. The reason for that is, I mean, this works fine if you chose this, it's, you know, so did 90% almost of everyone else who did this. And most people watching are probably going to say flex as well. But look at this, we get run into and I didn't, I don't know, did I mention that in the challenge? Let's just go look here. Yeah, it's a simple one. I didn't really go into details on this. But it's a potential problem where the image will actually stretch like this, which is kind of awkward. And again, most people aren't going on this size of viewport. So if nobody noticed that, it's completely fine. Now to fix that, it is just one line of code. We can just do any line items of start. And actually code pin gets mad at me if I do that. So we'll do a flex start so I don't get an error and it actually works. And that just means it won't actually stretch because now the default behavior is no longer set to stretch. So everything there is fine. The reason I sort of like doing this with grid though is if we throw this as a display of grid, you do need another line here. So we need a grid template columns. And it's one thing that's with grid that is kind of annoying, I'll admit is the properties are kind of long, it creates long declarations. But let's we can do that. And then we could just start with an auto auto. And that would basically give us exactly what we had with the flex box. It just we just need two columns, anything you could put here, basically to get two columns, I can do a one F R here as well. So it's like the default space, plus then I can get that on the side. The one reason that I sort of prefer or I'll make an argument for grid on this one is we can control the size of the image, but I can just buy these grid template columns. Now to do that is something that wasn't in my CSS to start with, but it's a reset that you see on basically every single project, which is you would have an image and that image, you know, the max width is 100%. This is an every CSS file ever maybe not quite, but you know what I mean. And often you'll see that combined with a display of block, though it's not required for what I want to look at here. But as long as you have a max width 100% of your images, I could say this is, you know, five pixels, and we're going to get a very small icon. Maybe that was a little exaggerated, but 50 would work better. But basically, I can control exactly how big that's going to be, rather than having to like say, you know, if I was doing this with Flexbox, then I have to go and do like my product. And I don't think that even as a class. So I might do product image that way and set a size on this. And there's nothing wrong with that. It's completely fine. I just sort of like that I can do it just by saying that column is this size or 75 or whatever I need to be in, you know, you could have different, different values come in here and it's just going to work. And I don't know for me, it's a really small difference. If you went with Flexbox, it's probably a little bit faster. And it worked for the most part. It's easy enough to fix that stretching thing. So not a problem. But I just wanted to sort of mention a couple of the benefits or potential benefits that could come with grid along the way as well there. So yeah, there we go. That was for challenge number one, we've already talked about two. So let's move on to number three for the third one. This was one of the ones where I said you could write code outside of the initial selectors. And basically, we have some elements that are there. And at large screens, I want this at small screens, I want this and at no point did I want there to be like a third, you know, two columns with one underneath, we want it to be three. And then they all just stack like this with no in between. And I did that on purpose because that sort of opens the door for grid or flex to come in. And I honestly thought this one would have a very even divide between flex and grid or maybe even lean more towards Flexbox. But I'm going to assume you have an answer at this point. But grid actually was like the absolute dominator in this. I had only 16.7% of people in my discord community chose to use Flexbox here, which blows my mind because this is flex box. If you want to do this without a media queries, actually the easier solution and I never you could use media queries if you want. So like you could come on here and just say display flex. And then that should give us some columns. And then I'm going to say, Oh, we already had the gap. I sort of I assumed you were doing display flex display grid. It gives us that. And then we could just come in and say it's a flex direction of column. So it creates rows. And then we just come in with our media min width. I'm going to do 600 pixels. Doesn't really matter where this happens at. And then we do a flex. Whoops. We do a featured products. And we do our flex direction there, right? And we just change it over to row. Nice and simple. And I thought a lot of people were going to do this. Now, maybe one of the reasons people didn't do this, if we get small enough, I did that too small. Let's make this 800 instead. One of the reasons people maybe people didn't do this. And even that's a little bit tight, but that's fine. It's doing sort of what we want. We have three columns, it goes down to one column, and everything is working completely fine. I should probably move my head down there. So we see it a little better. So yeah, three columns, one column, and it works exactly like how I asked. So I'm still surprised more people didn't go the flex box route. Now, one thing with this, if you did do flex, you probably would have to come in and do something like this with a flex of one. You need something to select each one of those cards. Just see how it actually shifted things a little bit. Just because we need to make sure they're all the same size. And this is always, for me, the downside of using flex box. And maybe the results from my discord community are a little bit a bias, because it's all people who watch me, and they've been hearing me beat the drum of if you need even columns, just use grid. Because this is something extra you often need to do with flex box to actually get even columns. Whereas if I did this with grid instead, we can take this off. Obviously, this is doing nothing now. But this is also doing nothing. But here they're stacking. And then I could just come here and say I have grid template columns of repeat three, one FR. So then we get three equal columns at my larger screen sizes and they go underneath. And that works perfectly fine. So both are fine. I just find this one's a little bit easier. So I do agree in general that I tend to prefer the grid solution here over the flex box solution. But if you wanted to be clever, we could do this without a media query. I think there's actually a way somebody posted in the chat for this that there's a way that you can do this with grid. But I was having trouble wrapping my mind around it, though it's a similar thing than what we're going to do here with flex box. So just bear with me and I got this from Hayden Pickering. Actually, I don't remember if it's Hayden Pickering or if it's Hayden and Andy Bell, who did it on every layout. But the idea here is you do a display of flex and it gets a little funky. I won't lie. But basically, this is what we need. And of course, it's flex. I'm going to do a flex wrap or I guess not, of course, but we're going to do a flex wrap of wrap, which lets that code pen update here. And so this is sort of what I didn't want, right? I didn't want something that would be by itself down here on the bottom. But then we can come in and we can choose those again featured products. And we're going to choose all of them. And on this, the fun part is we do a flex grow of one, which is just going to make them stretch and become really big. And then we get to the complicated kind of weird part where we're going to use a flex basis in a funky way. And for this, we're going to need a calc. And basically, we sort of need their size to all of a sudden switch from a small number to a big number. So you have to choose what that small number is going to be for their size. So I'm going to try like 500 pixels, and you sort of have to play with this a little bit. And I've found that with smaller numbers, sometimes it falls apart. Maybe there's some adaptations you can do to make it work. But we're going to do 500 pixels minus 100% times 999. And I've gone into more detail on this in a previous video. So I'm not going to deep, deep dive how this works. But basically, and we do need the parentheses like this here, because the order of operations in CSS. But I think, let's see, oh, it's not working. See the small numbers? Sometimes it doesn't work. Let's try a bigger number on there. And actually, we had it at about 800 before. So we'll stick with that 800. And this 800 will act as our breakpoint. So we'll see, look at that, exactly like we had before, where it's happening at around 800 pixels. And what you could do here is you could just come in and say breakpoint is 800, 800 pixels. Because this is like if somebody came across this, they'd just be utterly confused. But if you do it with a custom property, it's a little bit more, you know, you can understand what you need to change if you want to change the breakpoint, which is kind of good. And it goes back to that. And basically what this is doing is we have this really big number here minus 100% to explain how this works. I've done another video that I'll put a card to popping up that goes into more detail where I actually figured it out. So if the breakpoint here is smaller than 100%, this becomes a negative value. And as soon as that becomes a negative value, it breaks flex basis because that can't be a negative value. And then when we're at the larger screen sizes, the flex basis can kick in and it comes out to a large number. And then this magic works. And that's the part that sort of confuses me is when it does work. But anyway, it does. And yeah, it's still one of those things that rock my rain route, but you don't need a media query, which some people really like. And so there you go. And the advantage of it not needing a media query is like right now it's based on the viewport. But I could take this and put it into a container. And it's going to be based on the container size. Or if I put it in a sidebar, it's based on the sidebar size and it becomes much more reusable. Now we have container queries. So maybe you don't need to do this, you could use a container query instead, but support for it's not perfect yet. So this is sort of like a container query with better support. That's just pushing flexbox to its limits a little bit. But I would probably use grid if I was going to choose a solution to that one. So a little bit more complicated in the end maybe than you were expecting. But it's cool that we can get it to work. Challenge number four. Once again, we can add a code outside of our selector and we want something a little bit more dynamic. This one, the results surprise me. Because the idea, let's go back to here. I want this at large screens, this at medium screens, and this at small screens. So this time we just get it to work. And I didn't really give any extra information. We go from three columns to two columns to one column. And that was it. That was the only guidelines. And so you might have an idea of how you do this right now. And I thought that everybody was going to have the same answer in Discord. Actually, this is the one that I thought everyone would use the same approach. And that approach would have been with grid. There was actually two dissenters, though, that went the flexbox group. And they did something with flexbox. And so let's start with the flexbox solution, or one of them. So I just actually copied the code from the person who did this one. Because it's sort of how you have to approach it. There might be a little bit of optimization that could come into this, or you could really push the limits. And you can see it's a very small zone there where we have this little break where, but it does what I asked, because I didn't say what break points we should be using. But we have the three columns, it goes down to two columns, and then it goes down to one column at the end. It's perfect. And basically, they're just playing around with their flexes and their max widths. And I'm curious if we needed to do the max width on there. I don't know. That's why. Right, right, right. So this is really the reason I thought everyone would go with grid is because if you don't do that, you run into this problem. And this is potentially a good layout to have. This might be something you need to do. And if you do need to do this, you 100% want to use a flexbox grid to do this type of thing, especially if it's a more dynamic one like we have here, where the number of columns could potentially change. And then you go down to something like this, you definitely want to be and something like this, you definitely want to be using flexbox. But grid just makes this so easy to do. So to do it with grid, all we have to do is a display of grid, throw a gap on there. And then we just do a grid template columns, especially because I didn't give any specific breakpoints for any of this, where we do a grid template columns. And this is the weird one where it's an auto fit. And there's auto fit and auto fill chances are you want auto fit use that most of the time to be fine. So it's auto fit. And then we have to do a min max. And remember, I said grid can give you long, long answers here are long declarations. So the min max is what's the smallest the element can get or the smallest the column can get in our element is inside that column. So let's just say it's going to be 300 pixels, and then we'll do a one FR. So that's the smallest, that's the biggest one of our just means take up all the available space. Everything is perfect. Then we go up to having two columns, and then we go up to having three. And that's it. The reason we don't have more is because I do have a container wrapper on this that's preventing the content from getting wider. If not, it would actually make a fourth and fifth column. But with how we have this setup, this works perfectly fine. And for this type of layout grid is just perfect. Right. So I'm super happy with that. I love showing this just because it's great. The one issue that you can get with this is if you need bigger ones here, let's say we do 400, you could potentially run into some overflow issues where I'm getting some overflow going on right there. And if you ever want to prevent that, it looks a bit funny. But what you do is you put a min function inside of here. And one of the two values in your min function will just be 100%. And the other one stays what you had. And this looks really funny. But you can see now I have no overflow issues and it works perfectly fine. Just because the smaller number now is the smaller value between 400 or 100%. So if we're larger than 400 pixels, then it's going to use 400 because it has to choose the smaller of these two. But if ever it does not have enough room and it's getting smaller and smaller and smaller, well, then 100% is actually smaller than 400. And so they will continue to squish and you don't run into any overflow issues. So just a nice little solution there. And this one definitely grid to me is the right way to go. And as we saw around 300 does the trick nicely for that one. And now we get into the fifth challenge. And I think the fifth challenge was the one where I was expecting the most divergence. Or no, I said that already. The fifth challenge was when I guess that had the most potential for divergence, maybe the third one definitely I thought would be a lot. I actually I wasn't expecting divergence. I was just expecting the third one for everyone to use Flexbox where I wasn't sure the fifth one was probably the one where I wasn't sure what people would do. I just had no idea. So this one we wanted a layout that looked like this. That's it. Look at what we had in our markup in a second. The main rule for this is the content had to be vertically centered and the button had to fill as much of the horizontal width as in the picture below. So you can see like it doesn't go outside, but it just it's a full width button. That's basically it. This one does not have to be responsive. I meant in terms of like there's no breakpoint. So we don't need them to stack. I just wanted to columns all the time because I didn't want to get into the the nitty gritty of this one. And for this one, yeah, I'm curious what you would think. Definitely leave a comment down below for this one to say, you know, just say challenge five. I did this because I would like to know because if I look now at my survey results challenge five I had 19% using Flexbox had 66.7% using grid. And you'll notice those don't add up to 100% because I had 14.3% of people who broke the rules because in my discord I was very clear that you should only use one or the other. So I think that was five or six people who use both instead of using one or the other. And what I guess confused me a little bit about the idea of using both is let's if I come on my product here is that people that used both used it the other way around then I would expect. So what I mean by that is like here I have this image that's inside product and then I have a div with my content in there, right? So I would have expected most people to say that the product is a display flex and then use grid inside of that maybe. But what I found a lot of people doing is the opposite, which is kind of weird. So we can throw a display of flex here if we're going to use both that does that. Oh, maybe that's why. Maybe they did the display of flex and then they got on even columns like we're getting right now. So they said, you know what, I'm going to do a display grid with a grid template columns of let's just say 1fr, 1fr or it could be whatever you need here to be honest. But I guess maybe that's what started it off. And then for whatever reason, I guess people vertically centering just default to going in with flex box, but I just find like if I did my product product content, then we do a display of flex on here, what happens is they go like that. And then I have to change my flex direction. And we do column. And then once I've changed my flex direction, I can do an align item. No, justify content because I changed my direction, justify content of center. And let's just add some padding of 1rem, I think I put on that for the original one. And that doesn't work. Do I need the height 100% on there as well? There we go. Anyway, we start getting there. With that, of course, I could also do a gap of 1rem. I guess because it's not stretching, I would have, oh, because I know grid it should just whatever it doesn't matter. I have to do all that to get this in the middle, just like I had in my example. So, you know, it works, you can get there. But for me, any time that I do a display flex and then a flex direction column, that's just like my red bell of going, well, instead of doing that, unless I really need like some flexi box thing that it's good at. But if I'm changing the flex direction, and I don't need it to ever go back and I need to take advantage flex box, that just means let's just use grid, right? And then we can take these all off. And then I can do a place, let's just do a line content, I think, center. No, a line items center? Is that one also need the height one? Look at that. I created this challenge. And I still, oh, so then it would be an aligned content of center. Perfect. I'm surprised that this isn't stretching the whole height. Maybe I did something here that was preventing it doesn't really matter. So we still need the height 100% either way, or I muck something up along the way here. I'm going through on this. But, you know, instead, instead of a display of flex and then changing the flex direction, if I can just do it with my grid, it's going to have that same the button is going to go all the way across either way. I just find that so much easier to do. So yeah, I like using grid, if that's all I need right there. So these were all sort of like some fun interesting challenges. It shows you that sometimes flexbox and grid can both get you to the same result. And sometimes there's not a wrong answer for either one. But I really do think that each one has its strong suits and is better at certain things than others. I like equating it to wearing the right pair of shoes. Like if I'm going to go play soccer, I'm going to put some cleats on if I'm going to the office, I'll wear some dress shoes, and I wouldn't want you to mix those up. You don't want to wear cleats to the office, or people will look at you a little strange. Not to mention it would be kind of awkward and you definitely wouldn't want to wear your dress shoes to go play soccer. And so, you know, they both can get the job done, but they're not going to be the best at it as possible. And often it is the same when we're dealing with flexbox and grid. And so hopefully you gained some insights through my exploration through these examples here, and you tried it on your own. And hopefully you agreed with me on everything. But again, if you disagreed, a few of these could definitely go either way. But often we're using these for bigger designs and layouts and other stuff as well. And if you'd like some design patterns that you can use both flexbox and grid for, I've looked at five different ones that don't actually need media queries. A little bit similar to what we were doing before, but a bit simpler as well than that strange one that we were looking at there. And if you'd like to explore some design patterns using flexbox and grid, a little bit of inspiration from some of the ones we looked at here. I do have a video that looks at five different ones, none of them which use media queries and they all just work really, really well. And you can find that video right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome web on demand, Andrew, 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 corner of the internet just a little bit more awesome.