Flexbox or Grid challenge // which would you use to solve these?

hi there my frontend friends most people come up with simple ways to help them decide when to pick between flexbox and grid often relying on the 1D versus 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 five 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 uh because this is where all the challenges are and there's the challenge that says what you need to do and then you can check you know run the code pen and if you want to edit it you just click the the edit on code Bend 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 uh 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 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 R just to make it uh a little bit bigger uh and everything works pretty well and I'm pretty happy with that uh the other Advantage with Flex box is if we did you know we Smo 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 uh 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 cuz it makes it look a little bit more balanced maybe 0.25 is a little bit small uh but we we can do something like that and it looks pretty good and I'm happy with that uh and this is what flexbox 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 flexbox is a perfect solution for this type of thing but now things get a little bit more contentious as we move into uh the next one here which is going to be the first one that I mentioned um and so for this one it it's fairly simple all we wanted to do was make it so this text would go next to the image that's it uh 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 uh 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 uh 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 um 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 uh yeah it's a simple one I didn't really go into detail on this uh but it's a potential problem where the image will actually stretch like this uh which is kind of awkward and ugly um 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 pen 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 it won't actually stretch cuz Now the default behavior is no longer set to stretch so everything there is fine uh 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 uh 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 uh and then we could just start with an auto auto and that would basically give us exactly what we had with the flex box uh it just we just need two columns anything you could put here basically to get two columns I can do a 1fr here as well so it's like the default space plus then I can get that on the side the one reason uh that I sort of prefer or I'll make an argument for grid on this one uh is we can control the size of the image by 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 uh which is you you would have an image and that image you know the max width is 100% uh this is on every CSS file ever maybe not quite but you know what I mean uh 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 um but as long as you have a Max width 100% on your images I could say this is you know 5 pixels and we're going to get a very small icon uh maybe that was a little exaggerated but 50 would work better um 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 uh 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 and you know you could have different uh 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 flex boox 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 uh as well there so um yeah there we go that was for challenge number one we've already talked about two so let's move on to uh number three for the third one uh 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 we want it to be three and then they all just stack like this with no in between and I did that on purpose cuz 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 Flex box but I'm going to assume you have have an answer at this point uh 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 CU this is flexbox if you want to do this without a media query is 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 uh that should give us some columns and then I'm going to say uh oh we already had the Gap I sort of I assumed you were doing a display Flex display grid uh it gives us that um 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 at media minwidth I'm going to do 600 pixels doesn't really matter where this happens at uh 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 uh people didn't do this if we get small enough I did that too small let's make this 800 instead um one of the reasons PE 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 uh so yeah three columns one column and it works exactly like how I asked so I and I'm still surprised more people didn't go the flexbox 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 um you need something to select each one of those cards just see how that 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 flexbox 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 a 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 um but this is also doing nothing uh but here they're stacking and then I could just come here and say I have grid template Columns of repeat 3 1fr 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 flexbox solution but if you want it to be clever we could do this with Oda media query I think there's actually a way somebody posted in the chat for um this that there's a way that you can do this with grid uh but it 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 boox um so just bear me 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 um who did it on every layout uh but the idea here is you do a display of flex and it gets a little funky I won't lie um but basically this is what we need and of course it's Flex so 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 U which let's that code pen update here and uh so this is sort of what I didn't want right I didn't want something that would be by itself down here 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 uh 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 uh 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 uh 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 found that with smaller numbers sometimes it falls apart maybe um there's some adaptations you can do to make it work but we're going to do 500 pixels minus 100% time 999 and I've gone into uh more detail on this in a previous video so um I'm not going to deep deep dive how this works but basically uh and we do need the parentheses like this here CU order of operations in CSS uh 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 um 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 uh 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 uh 800 pixels cuz this is like if somebody came across this they' just be otherly confused but if you do it with a custom property um it's a little bit more you know you can understand what you need to change if you want to change the break point uh 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 break point here is smaller than 100% this becomes a negative value and as soon as that becomes a negative value it breaks Flex BAS B cuz that can't be a negative value uh and then when we're at the larger screen sizes the flex bases 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 um and yeah it's it's still one of those things I rock my rain around but you don't need a metor query which some people really like um 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 uh 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 um that's just pushing flexbox to its limits a little bit but I would probably use grid um if I was going to choose uh a solution to 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 uh once again we can add code outside of our selector and we want something a little bit more Dynamic uh this one the results surprise me um because the idea let's go back to here um and we I want this at large screens this at medium screens and this at small screens so this time um 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 would do this right now uh 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 uh there was actually two denters though that went the flexbox route and they they did something with flexbox and so let's start with the flexbox solution uh or one of them so I just actually copied the code from uh the person who did this one uh because it's sort of how you have to approach it there might be a little bit of optim ization that could come into this or you could really push the limits um and you can see it's a very small Zone there where we have this little uh 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 uh 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 um ah 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 um 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 uh 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 cuz I didn't give any specific break points uh for any of this where we do a grid template columns and this is the weird one where it's an autoit and there's autofit in autofill chances are you want autofit use that most of the time you'll be fine um so it's autofit and then we have to do a minmax and remember I said grid can give you long long answers here or long declarations um so the mmax is what's the smallest the element can get or the smallest the column can get and our element is inside that column so let's just say it's going to be 3 pixels and then we'll do a 1fr so that's the smallest that's the biggest 1fr 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 uh and that's it uh the reason we don't have more is because I do have a container or wrapper on this that's preventing the content from getting wider if not it would actually make a fourth and fifth column um but with how we have this set up this works perfectly fine and for this type of layout grid is just perfect right so I'm super happy with that uh I love showing this just because it's great uh the one issue that you can get with this is if you need bigger ones here let's say we do 400 um 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 in 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 um 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 uh pixels then it's going to use 400 cuz 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 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 um does the trick nicely for that one and now we get into the fifth Challenge and I think the fifth challenge was uh the one where I was expecting the most Divergence or no I said that already the fifth challenge was when I guess uh that had the most potential for Divergence maybe um 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 um the fifth one was probably the one where I wasn't sure what people would do I just had no idea um so this one we wanted a layout that looked like this that's it um and we'll 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 um as in the picture below um so you can see like it doesn't go outside but it just it's a full width button that's basically it uh this one does not have to be responsive I meant in terms of like there's no breako so we don't need them to stack I just wanted two columns all the time because I didn't want to get into the the nitty-gritty of this one um and for this one um yeah I'm curious uh what you would think and definitely leave a comment down below uh for this one uh to say you know to say challenge five I did this um because I would like to know because if I look now at my uh survey results challenge 5 I had 19% using flexbox had 66.7% using grid and you'll notice um 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 uh you should only use one or the other um so to to I think that was five or it was six people who who used both um instead of using one or the other and what I guess confused me a little bit um about the idea of using both is um let's if I come on my product here is that people that used both used it the other way around than I would expect uh so let's 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 uh and then use grid inside of that maybe um but what I found a lot of people doing is the opposite um which is kind of weird so we can throw a display of flex here if we're going to use both that does that uh oh maybe that's why maybe they did the display of flex and then they got uneven 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 uh let's just say 1fr 1fr um or it could be um 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 um Flex box but I just find like if I did my product uh product content and 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 cuz I changed my direction justify content of Center and let's just add some padding of one R I think I put on that uh for the original one and that doesn't work do I need the height of 100% on there as well ah there we go anyway we start getting there uh with that of course I could also do a gap of one R um I'm I guess because it's not stretching I I would have oh because I no but grid it should whatever it doesn't matter I have to do all that to get this in the middle just like I had in my example um so you know it works you can get there but for me anytime 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 flexy 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 of flex box that just means let's just use grid right and then we can take these all off uh and then I can do a place uh let's just do to align content I think Center no align items Center is that one also need the height one look at that I I created this Challenge and I still um oh so then it would be an align content of Center perfect um 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 mck 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 just not a wrong answer uh for either one but I really do think that each one 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 mix those up uh right you don't want to wear cleats to the office or people will look at you a little strange um not to mention it would be kind of awkward and you definitely wouldn't want to wear your dress shoes to go play soccer um 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 uh a little bit similar to what we were doing before but a bit simpler as well uh than that 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

Channel: Kevin Powell

Views: 51,519

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, css layout, website layout, flexbox, grid, flex or grid, flexbox vs grid, grid vs flexbox, css grid tutorial, responsive web design, css grid vs flexbox, css grid layout, grid css, css flexbox vs grid, how to use css grid, responsive css grid, css grid and flexbox

Id: aKFB5Bjk6KM

Length: 25min 26sec (1526 seconds)

Published: Tue Jan 02 2024