No, Flexbox isn't "good enough"

Key Takeaways

anytime I mention Grid in one of my videos I get comments about how grid is either too complicated or how worse in my opinion people saying that well Flex is good enough and I don't need grid well my front-end friends if you're one of those grid is to complicated people you're in the right place because grid can be simple and if you're one of those Flex is good enough people you're also in the right place because not only can grid be simple to use it can also be a lot simpler and easier to do certain things with it than even do some things that you can't really do with Flex box and we're going to be doing all of that starting with this simple example that we'll dive into some more complicated stuff as we go through this here I have three columns with a display Flex that's what Flex is good at right throw a display Flex it makes columns for you I'd argue you want to use grid for this though even if it's just three columns like this and the reason for that is like this sort of harks back a little bit I guess to the float based days but often if you needed three columns and then you need another three columns we're creating rows to create rows of content uh which back in the float based days we sort of needed to do and then with the Advent of flexbox there were sort of better ways to approach this way uh in a sense but like this is very common but then of course you might end up with a row with three and then a row with two but you don't want those to stretch but that's what flexbox does so then you'd have to come in and say that well these are actually like the call Four right and this this was such a common pattern for so long and then you had your call four and that had uh a flex basis and even like what would the flex basis here be cuz we have a problem I have a gap here and then you need to take that into account but we're going to sort of round up a little bit around down or whatever um and there we go except those don't actually line up now if you notice um just because of the way Flex works with the shrinks and everything that's on there so that sort of sucks um but whatever that sort of was the right idea to go in the right direction you take into account to your Gap and then you can fix that inconsistency there uh and this was a way that we did it for a long time and then you go well you don't actually even need to do that right we could get rid of that we could have a single row and just add the flex wrap on here so I guess yeah we could do that Flex wrap of wrap uh which is going to work but then 33% is too big for my Flex basis because once again the Gap is there and now we have to like drop that to a smaller number that's kind of awkward and weird um they're probably a little bit too small now to fit in exactly but I can't put a flex grow on these cuz if I put a flex grow we end up back at the the same problem we had before uh and again there's there's ways of making this system work there's bootstrap was the most famous example of this being really robust cuz it was created when we had float Bas layouts and then they readapted that and it works really well but we could say that instead of having that we could say that my row here is actually a display of grid we could take off my Flex wrap and we could just say how many columns we want grid template columns and I could say it's repeat and I want three so I do three columns one R uh and then I get three right and it it just works uh and as much or as little content as I put in there it's going to work because the parent is in control of the layout and the elements just fit into that layout and it just works and it's wonderful and it's so much easier uh in my own opinion and then you might say well there's an advantage to the flex one which is if I have the amount of elements I put into there is how many columns I get right uh and yeah you could do that so if we go back to three here and we're going to go back to a flex let's just comment this line out I guess cuz we're going to use it again uh but we're going to go back to this being a display flex and again if I have two columns we have two columns right uh if I go back to three I have three if I go four five six whatever I put in here that's how many columns I get and that can be convenient that we can run into some issues like this and then often you have a media query on when that's not going to be columns anymore and you're going to change the flex Direction well we can do the same thing with grid uh and still maintain the advantage the grid has at least in my own opinion here by just doing a display grid and then a actually we don't need the template columns we can come in with a grid autoflow of column and then we get the exact same behavior that we just had with flex boox which is kind of nice again because the parent is in control of what's happening and you can just get a little bit more consistent layouts because of that because with flex box if you put padding on any of those elements it's actually going to create different sized elements I've talked about this in a previous video so if you don't believe me you can check out there'll be a card popping up and I'll link it in the description uh but I want to go to some other stuff that I haven't talked so much about um so one of them is people will talk about responsiveness as well uh you can do that with grid and of course I'm not saying you should only use grid this might not be the layout you want maybe you want 9 and 10 to stretch across the bottom if that's the case then you should be using flexbox instead of grid but if I need something that's a little bit more set up like I have here right now well then just coming in and using a grid autofit with your mmax on there is going to do the trick and it just means that it works and it's responsive and it's great and it's very consistent and I get a grid very structured grid which you know the name sort of implies there and doing this type of layout with flexbox that's responsive and it just works and I'm not doing everything through break points and media queries is kind of tricky and then spanning columns like I'm doing here that's kind of tricky too right here I'm just saying I have my uh columns 3 1fr I could have used the repeat syntax there I guess but then I just say a column has to span across two it doesn't matter the size of these I could even say this one's like 100 pixels and lock it in and it's always going to span across two columns regardless of any sizing or anything else so if we went back to the flex basis version and modifying that to take into account the span that I'm doing that's kind of annoying to do cuz then you also have to account for the gaps and the spacing and everything else and this is just so easy and something that' be really hard here would be if I said grid row span two and I'm going across to that way that's going to you know if I want to do that with flex box I could but I'd have a row probably set up for this I need another row for all of those and then I guess maybe this would be on its own and then those would be wrapped and there's sub rows or I don't know maybe I'm over complicating it but you definitely would want like a row here and here and then yeah you need like all this nesting going on to easily be able to do this and there's maybe other ways you could sort of finagle it or get it to work or you could just use grid and say grid row span two and it works right there's no extra nesting there's no extra anything else you just put your elements there and you tell them what to do and they do it uh and then the other one that's just makes life so easy is having overlapping content where you can do the same thing because we can span over multiple lines and stuff like that so my H1 let's even make the font size here slightly bigger uh font size 3 rep might be too big and wrap around um but the idea here is it's so easy to create overlapping content with our grid rows and grid columns here that if you need this type of layout if you're trying to do this with flexbox you're just probably positioning stuff or maybe using negative margins or doing some other stuff which with a grid I can just say that this goes from my column 1 to three and this one goes from a 2 to four so there's an overlap between these cuz this goes to three this starts at two we can even turn on uh our grid inspector here so we can see what that actually looks like where you can see that this middle row that's being created is shared by both of the elements along the way there and it creates overlapping content super easily and if you do want to use positioning with position absolute it actually works super well with grid as well I'll put again a card to a video on that CU if you absolute position something you can tell it what cell or cells it's in and then position it within those cells instead of like the entire element it's just really convenient and it opens up a whole bunch of new doors and things that are just so much easier to do and if you're someone who's going to say you never need overlapping content uh just go look on dribble or just look at popular websites and I promise you you're going to find a lot of examples where there is tons of overlapping stuff uh and then on to the another topic though that does come up a lot which is browser support we're in July of 2024 and people still on every video where I talk about grid and especially comparing it to flex box we'll say but flexbox has better browser support so I avoid grid because of that if that's you right now I hope you're also not using Gap in Flex box aspect ratio custom properties clamp or any of the other math functions and stuff like that because all of those have worse support than grid and I realized this was just a really quick overview I was just diving through and picking out little things that are easier I didn't Deep dive how to use grid and if you're one of those people that said well this is kind of complicated I didn't really get what was going on with it I promise you grid can actually be really easy to get started with and and if you'd like to learn how I have a video that looks at the easy way to get started with grid and that video is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew Phillip Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome