 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 one 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, it adds 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 friend and 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 Flexbox, 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 Firefox for this one, because Firefox's DevTools offer us a bit better of a way to break down what's happening here, and a little bit easier to understand. So when we have the three columns like this, if I go to my layout here, we have my Flexbox layout, and let's make sure we select the parent right there, perfect. So when we have this, or actually we want one of the children, so we'll select this first child, and you'll notice here on my even columns I have this, it's not really doing a lot right now, though it's helping space things out, as you can see it, we had a little change there. 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, or 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 an 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've never seen 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. So here we have the 219 point whatever, the 219 point whatever, and the 219 point 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 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, the specificity should win. I do like using a display grid instead. And when I do that, it breaks everything. 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 or 1fr. You can see this one actually shrunk down a little bit, but now we have a 304, a 304, and a 304.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 times, especially with the FR that potentially if you're really squeezing on space, 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 to consistently 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 and we shrink this down a little bit, we're running into this and we need to have a media query or a Flexwrap. If you did the Flexwrap, so even columns and we did a Flexwrap of wrap, when things squish then you also run into these types of things where you get this middle ground. There's ways of overcoming that as well by pushing things a little bit. There's a good example of that at every layout, but 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. Let's do 800 pixels maybe. Then we have our even columns, and that just means when we hit that 800 pixels, maybe that could have been like 600 or 500. 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 in 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 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 corner of the internet just a little bit more awesome.