 An interesting thing with modern web development is when we're writing our CSS we went from being almost completely reliant on using percentages as widths to now where it might even be a good idea to be actively avoiding using percentages. Hello there my friend and friends thank you so much for coming to join me yet again and if you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and one way to do that is to find out about the things that can actually cause some problems that you get frustrated with and are fighting against that there's actually really simple solutions for and so let's jump into it with this example that we can see right here which is one of those really annoying examples of colored boxes that doesn't really translate to the real world please bear with me we're going to go into real world examples in a second but these are handy because they help illustrate what what's happening and here I'm using grid for this with my grid template columns and I've set up two columns using 50 each to give myself two columns but there's problems with this one of them being that if I decided to add a gap now all of a sudden it's overflowing out the side and sometimes you don't notice it because your gap is small enough but you get like this weird alignment issues that were going on but if you had a larger gap then you really notice it where it's pushing out the side like that I'm using grid as an example here this can happen in other situations as well the only time it tends not to happen is if you're using flexbox because then we have flex shrink so it can be smaller than the size that we're actually setting things at but we it's whenever we're using percentages and adding margins or adding gaps we run the risk of these types of things happening and basically it's because each column is 50 of the parent because whenever we set percentages on widths or sizes of stuff it's basically going to be based on the width of the parent and so here we have 50 50 plus that gap that's lining up in the middle right there and of course maybe you don't even want 50 50 percent you're trying to do some like two column layouts you have like a 75 percent and a 25 percent or something like that for your main content in your sidebar whatever it is using percentages isn't the right solution here in the case of using grid which would be quite common for this type of layout I could just do a 3fr1fr because we're keeping that 75 25 ratio going which is three to one but the advantage of using frs is they're using like a fraction of the available space so we're saying this is getting three parts this is getting one part and then it's making it work because it's using the available space which doesn't include the gap so right away that fixes that problem now another advantage of using frs over percentages is maybe you want a more fixed value here of like I don't know 15 whoops 15 rem like that and now this is at a fixed one and then we get to say that this is one fr on the side there so you get the fixed value that's never changing regardless of what the screen size is and then of course the one on the left is just going to take up all the available space which we couldn't really do if we were using percentages because who knows really what percentage it needs to be anyway or if you have a really annoying designer that's saying that this space has to be 75 percent but they're not really too worried about the sidebar you could come in with something like 75 one fr like that and now you know that this is always 75 percent but then this is the one fr that's left over so sometimes you can get away with using percentages you just want to use them in smart ways that can still adapt to the situation and not just throw them in there really nearly now jumping over to a more real world example what we're looking at we could do a we have say a main area here with some actual content and we do our grid template columns and as I said if we do a 75 25 percent or something like that we can get a little bit of side scrolling thanks to the gap that is in the middle so once again a nice little one fr a three fr one fr and we get a nice little content like that with the sidebar and the main content there another situation though that could arise where I've see people use percentages and there's different approaches and different fixes here and this could be if you're using flexbox as well is what happens when this area gets a little bit too small so if we go into responsive mode which is I get asked about this a lot it's in your dev tools if you're using chrome it's this little button right there but what we want to do is here when I you know let's shrink that down now and when my sidebar goes to the bottom I've set up a media query to make some columns and I get this mess right here where they're all different sizes and it's very simple what I'm doing I'm using flexbox in this case if we come and take a look I'm just saying that we have our sidebar grid which if we come take a look here it's my sidebar grid I called it grid because I was using grid and we're going to switch back to grid I guess we could have just done sidebar it's not worry about it too much we have this making three columns basically when we hit or it's making the columns and then when we switch over in our media query to the larger sizes it stacks and again a container query would be very fantastic for this instead of relying on this behavior to get it to work and there's other ways of doing it without media queries even with flexbox here but the problem right now that's happening is because I'm using flexbox this one has a bit more content in it so they're not all equal sizes now one way we could go about fixing that is outside of the media query and we'd probably have to adjust things we'd say sidebar grid and select all the direct children and give them a flex basis of 33 don't do this please I just want to show an example that I see to make them all the same and there's problems inside that that we'd want to sort out because of the way that things are working but then I get my three columns but then it gets too tight and I'd want them to restack and stuff so we'll look at a better approach there but the other issue that I see is people when they do this they're not really taking advantage of how flexbox works anyway where they're setting these like really specific widths on things now we have a gap that is coming in here and these are actually shrinking down to be smaller than that anyway so as I said earlier with flexbox it's less of an issue but the problem here is maybe sometimes you have six posts and other times you have two posts so if we come here and I delete one of them well then we get this awkward situation where it doesn't look great right because you have this big empty space that's still stuck under there or if you had one then it's not really working or if we take that and we add one and we go up to four well then we run into that's not great either right so you know setting a very specific percentages on things these days and in today's modern web is something we don't generally need to do anymore so we could fix this using flex basis actually and to say a hundred percent and it's going to work and make them all the same because they're actually shrinking down the advantage now is if I add or remove we won't do all of them but if I remove one at least it's going to adapt and now they both take up all the available space I'm not going to deep dive this because I've talked about how this works in the past but it's a nice way to get even columns it's not perfect but it does a pretty good job we could also take advantage of flex behavior for growing and shrinking or we could use grid as well for this which is my original thing which is why we had the sidebar grid and my aligned content on here so let's switch this over to a grid and delete all of this and hit save and then we could just come on here and use my grid template columns and use the repeat auto fit on here auto fit and instead of using like set sizes on stuff or layouts these days it's much better if instead of doing that I'm just going to put this on another line to make it easier to see what I'm doing but it's much better to rely on intrinsic sizing which is a term that Jen Simmons coined which is more about letting the browser figure things out based on different parameters you might be giving it because we have a family what's the best breakpoint nobody knows so let's let the browser decide based on the information we're giving it instead of saying you're 50 percent you're 20 percent and all of these things like that and coming in with these rigid things that actually end up breaking over time so here on my min max we could come in and say this is a minimum size of say like 25 ram which might be too big and then we could do a 1fr I'm going to fix this up in a second because it is a little bit problematic and it's not working probably because it's way too big and of course I've been trying to debug this why it's not working when it's a min max and not a mix max so there we go maybe 12 here or something I don't know we'll see what the numbers are you can see I have three columns and this might not be perfect but if I drop this down small enough then we just get a grid that's showing up there and then if it gets smaller we get a grid you know they just stack that way instead and if we go to larger sizes well because it squished down in the sidebar now they don't have enough room to go next to one another so they don't they just stack I don't even need a container query or anything fancy to do this type of thing and you could do a very similar behavior with flexbox for this as well of course on these cards they do not look fantastic I am using grid on them so let's just do a line self start which might fix them there you know we could do that or we could even do an align items of start line content of start I should say depending on the style that you want it's just because I purposely made one of them longer for the flexbox example we were looking at and I think both flexbox and grid are fantastic tools we don't have to come in with these fixed sizes and worry about things that much anymore but it does raise the question of when do you want to be using flexbox or something and when do you want to be using grid for something that is something that I've spent a lot of time thinking about and reading about and talking about which you can see in this video right here if trying to decide is something that you struggle with every now and then and with that I would like to thank my supporters of awesome over on patreon Jan Johnny Michael Mr. Dave Patrick 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 the internet just a little bit more awesome