Why I use grid over flexbox for this common layout

you need some simple columns so you throw a display Flex on there add a little Gap or something and you're good to go right well not so fast well yes it can work most of the time but that doesn't mean every single time for example even if you came in and made sure all of your Flex items had the flex 1 there to make them all the same size and then maybe you had another class that you put on one of these divs we do the class CTA here hit save and that's a whole bunch of padding and despite this which you thought would be setting the same size on everything this one is clearly a lot bigger than the two columns next to it hello my front end friends and welcome back for yet another video if you're new here my name is Kevin and here at my channel I'm here to help you fall madly deeply in love with CSS and obviously the example that we just looked at was massively exaggerated but I really wanted to show you what was going on or the problems that you can potentially run into when you're using plexbox but there's not really a good way to get around or avoid so diving into the code we're actually going to be looking at using a Firefox for this one because firefox's Dev tools offer us a bit better of a way to break down what's Happening Here uh and a little bit easier to understand so when we have the three columns like this uh if I go to my layout here we have my flexbox layout and let's make sure we select the parent uh right there perfect so when we have this or actually we want one of the children so we'll select this first child uh and you'll notice here on my even columns I have this it's not really doing a lot right now um though it's helping space things out as you can see it we had a little change there um and when we have items that are Flex items the flexbox always works off of the content size that we see down here so we have content size 261 and this is all based off of the Box model you know the Box model we have our content size the padding the border the margin and flexbox looks at the content size and not the paddings the margin and all of that which is actually a good thing and it's very often you'll see like in even columns star get them all working the same way the issue that comes in is when I did that where I had the CTA class where I exaggerated things just by putting like a ridiculous amount of padding that you'd never see in real life on there and it adds a ton of extra space and it actually forces these to be smaller and that's because what is happening is flexbox only has so much space to work with and so it's making sure the content size of all of these is the same so we have this one is at a 219. let's just select the parent there um so here yeah we have the 219 Point whatever the 219 Point whatever and the 219 I mean whatever so the content size of all of these is the same because of what we have here this is just doing a flex grow Flex shrink and the flex grow is on the flex basis is zero anyway it's making sure they're all the same size but it's the content size that is the same so when you have one div that has a lot of padding on it you have the content size that's the same and then that padding is eating into all that extra space meaning we don't actually get this consistent layout and one thing I really like doing when I have even some sort of even columns class is to make sure that they're actually even columns and I want to be able to sort of throw any content in there now I don't want to say you should be using Flex or you should be using grid I think use what you're comfortable with and what you're able if Flex is working for you keep on using flex but I really I want to show people that sometimes Flex is doing things they don't really realize and like a lot of the time they don't realize it because that crazy padding that you have on there it's not actually crazy padding it's more like a padding of one and in this case now again we have 294 294 294 but this one's actually slightly bigger and it's taking up 326 pixels because of the extra 32 pixels of padding that are there so visually you might be thinking that they're all the same but there's this slight little inconsistency and if you had another row somewhere you might start seeing these little like off alignment things and that's why when I do my even columns I'm just going to do the same code lower down so the specificity should win uh I do like using a display grid instead and when I do that it breaks everything uh there's different approaches you could use for this but we can do a grid Auto flow of column instead and already it's a lot closer now I don't think they're actually going to be the exact same we're running into that same issue we had but then I can do my grid Auto columns r1fr and you can see this one actually shrunk down a little bit but now we have a 304 a 304 and a 304 0.9 and that means this one the content size is actually a little bit smaller but when you add the padding on the two sides they all end up being the same and that's just because when we do this with grid the parent is what's in charge and there's no real influence coming from the children now there are time especially with the FR that potentially if you're really squeezing on Space you know when you get into the fringes of anything this sort of falls apart sometimes a little bit but it is going to be more consistent than how flexbox is working if you're running into these situations where you just want a consistent layout throw anything at it padding no padding different padding and it doesn't matter now that's not always a realistic situation sometimes you either all have padding or none of them will have padding that's usually something that's a bit more common but I want to make people aware that there is this potential for inconsistency and it's really easy to do with Grid it's potentially less lines of code you might be saying this isn't responsive but my flexbox solution right now isn't responsive either so if we go back to the flexbox version and I open up responsive mode let me shrink this down a little bit you know we're running into this and we need to have a media query or a flex wrap and right if you did the flex wrap so even columns uh and we did a flex wrap a wrap when things squished then you also you know you run into these types of things where you get this middle ground there's ways of overcoming that as well um by pushing things a little bit uh there's a good example of that at every layout but you know we could just probably often have a media query on when the flex direction is changing and you probably do the same thing if you're using your grid solution where you have your display grid maybe you have a gap on here of one REM and then here we just come in we say at media Min width of 600 pixels uh let's do 800 pixels maybe then we have our even columns and that just means when we hit that 800 pixels yeah maybe that could have been like 600 or 500. um but then when we run into that situation then it just switches over it's not that hard to do and I just find it a little bit more consistent and I still think flexbox is an amazing tool I use it on every single project I do but I think that what happens is people get comfortable with either Grid or flexbox depending on what they learned first it works for them and pretty much everything they throw at it and they don't realize that maybe there's easier ways of using the other one and if you'd like to see how I actually decide between when I use flexbox or when I use grid and how I try to learn lean into the strengths of each one in a little bit more detail then you'd probably enjoy this video right here and with that I'd like to say a very big thank you to my enablers of awesome Jan Johnny Michael Mr Dave Patrick Simon Steven 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 corn on the internet just a little bit more awesome [Music]

Channel: Kevin Powell

Views: 225,749

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

Id: ctHE8EXEoj8

Length: 7min 31sec (451 seconds)

Published: Tue Nov 08 2022