Fixing when CSS Grid has extra spacing

Key Takeaways

so I have this layout that's right here but this weird thing is happening where if I come in and I add it to this grid layout area which has these four sections in it when I create the layout here I'm getting all of this extra space and this is really weird right well my friend end friends this actually is exactly the situation that somebody in my Discord server recently ran into and I know this is a problem other people do too so I want to look at the solution for it and to really understand what's happening the first thing I'm going to do is add an outline here we're going to do three pixels solid and we'll do chartreuse as a color cuz I'm into the weird color names these days and we can see that it's taking up all this height here and the reason it's doing that is because we're actually inside of this main layout here where I have the nav on one side and this going here and my main layout this could either be flexbox or grid it really doesn't matter either one of those would cause this to happen where my nav because I've given it a height of 75 VH uh is is really big so this side is stretching to match and because it's stretching to match grid does this thing where if we don't have any defined if we go and take a look at our grid let's turn that one on you can see that those rows that it's generating right now are going to fill up the entire space because we're in the stretch mode so the grid is stretching and then the rows they're just Auto height so those that auto height is just going to fill that available space and then the content is going to be in there and then we end up with all this extra space coming in here and it can be definitely a little bit annoying and to be able to fix this luckily it's really really easy we can just come on here and it doesn't really matter where we declare it but I like doing it after my uh template rows and columns I'm going to come in with an align content of uh start I about to do Center but we want to do start and we're going to see it pulls everything up and align content is something that I think not enough people know about you can see if I turn that off we turn off this my layout starts going more to what I originally wanted and I technically could have done something similar in the main layout too to pull everything up but I want to look specifically at doing it on the layout where the issue was happening in the first place and why it's working cuz you can see now my my entire grid has moved like that if I didn't align items instead of align content what's happening is well nothing's actually changing aign items start is the default so I'm going to switch this over to a center and we're going to see that these get centered within their cells so with grid anytime we're using the items keyword we're talking about the positioning of the item within the cell that it's already in and it won't impact the size of that cell whereas if we use an align content it's affecting the grid itself not the element itself cuz that element is still stretching and it's still that entire height and it's going to make those rows as small as they can just because I haven't declared any rows anywhere so it's just the the intrinsic rows being created and they're getting now as small as they can and because I'm doing allign content center it's centering the grid itself within the parent and as we said we want to use a start here instead and it pulls it up and if you'd like to go more in depth in how all of this works the Align content align items uh justify content and just justify items I've done a in-depth video with looking at grid and understanding it all and sort of making that mental model of how it works to make sure we're really getting it and I've also covered all of those alignment and justification properties in flexbox as well cuz flexbox is similar but a little bit different so if either one of those worlds confuses you you can find those two videos right here for your viewing pleasure and with that I would like to thank my enablers of awesome Tim and Simon as well as all of my other patrons and channel members 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