 A couple of videos ago I built out of this website or this design, I took a few videos to do so, I really enjoyed doing it, but I ran into a few problems with Grid, few people commented that maybe Flexbox would have been a better choice. Probably not wrong to be honest, and maybe I should have gone at one point. You know what, this is a bit of waste of time, let's go and use that instead. But one thing I kept saying over and over and over during that video is that I can't wait for SubGrid to be here, let's find out why that is. So as a quick reminder of what the problem was the very first time I did this and why everything didn't work is when I originally set up my Grid, I did this as a 1FR. And so if we look at a Grid like this, let's hit save, and you're going to see these two things have come out of alignment with each other. And let's go take a look at why, so I'm going to open up my elements here. So this is in Firefox where we have our Grid Inspector. And I have my Grid here for my header, and I have my Grid here for this area. Now looking at those, looking at those, we can see that they're both using this custom property for their sizes. So we know they're both identical, and just to show you that they are, let's just, you know, we'll delete this and hit save, and the whole thing should break for both of them. So you can see they're both breaking, so they're both using that Grid. And because they're both using the same Grid, but the problem here is with the FR unit because the content is different in the two Grids. So here I'm saying a min max of 1M to 1FR. And as the screen adjusts up top, I have a different amount of content than I do down here. So down here, I have lots of extra space compared to what I have up here, which is a lot more jam packed. So 1FR, what FR is the available leftover space. So in this case, the FR, there's a lot more available space in this Grid than there is in this Grid. So you can see here my line number, even the two is here, the two is there. Three and three, they're really offset four and four. And then even here, I have a five and a six. But because I had no content in my last column in the Grid in this area, my max content is zero, zero pixels wide, there's nothing there. So these two Grids look like they're, so it's just collapsing to nothing because there's no content in there. So even though they're using the exact same Grid numbers, everything, everything is set up identically. They're completely different. So what I did to fix that at the time was I didn't really love, it wasn't, I didn't fall in love with the solution. But if I said, if I set that to 10% instead, I know this will get locked into the same number at least everything else, like these are set numbers. So I know that they're going to be okay, they're going to lock in. And then here I said, well, whatever, it doesn't really matter that they're not the same because this isn't using that last column. This was literally created just for this little guy here. So I didn't mind it too much, but not ideal. You know, it doesn't feel great, but it got the job done. If instead of doing it like that, though, I'm going to come through and we're going to make some changes. Now I want to take all of these grid lines off every all the grid was only set up in my media queries. So we'll probably have to tweak some stuff here. Grid min width 700 is I think when the grid came in. So there you can see that that's the first time I mentioned the grid. So let's come into here and I'm just going to do body display grid, nothing much should change there, but this will break everything display display grid template columns bar grid. Everything should just break. That's okay. On my main here, I don't need this anymore. I'm a well, yeah, let's just delete it for now. So I'm going to go, let's just turn that off for the moment. But what I will do is I want to tell my main that it is going on the grid column because one over negative one, because this is a child now to the body. So I need to position it on the grid. So I'll hit save and you can see that's now going the full size like that. Actually let's turn that off. Right now we can see my body's grid. So it's going the green here is my body's grid. It's going from one side to the other. So we can see that's working. And the other place is my header. I'm going to turn off my grid template columns here as well for now. And let's just come in and say that we have the grid column of one over negative one there as well to fix it. And it's not perfect. You can see there's some major issues. This is in the wrong spot. Interestingly enough, I'm not even sure why that happened, but that's okay. That's okay. All right. So we've now have one functional grid and we just have to get things where they want where we want them to be on that grid. So here where I originally, let's turn this back on where it originally said on my main that I want to use the var grid, what I'm going to actually do is here is say sub grid and hit save and fingers crossed the main area should go back to how it was. That's magic. And now let's go back also to my heading. Now this was in a different media query. So we might have to play around with this a little bit, but it's still going to work here sub grid. And like magic, it's fixed. Look at that. Everything is working. So I went back to like everything that I'd previously set up. But you'll notice, let's come all the way up here and using the one FR and they're both lining up together. That's interesting, right? You might be going, well, that's cool, but wait a second. What's happening? I'm also notice here we have like this indented grid. So it's actually saying like this is a subgrid of that and that is on a subgrid of that. So what's happening? What's happening? We're, let's go examine down here and I'm actually going to turn off the subgrid on my header again and hit save. And notice the space here is really, really big, but when I turn that back on, the space adjusts and it goes back to being small. It goes back to sort of how this one, this is sort of what's actually controlling it. So there are some complications that can definitely come up when you're using subgrid 100%. There are some things that might be unexpected because what it's doing is it's saying that I want my grid template columns are going to be using the grid of my parent. So it's looking at the original line numbers. So like here even if I go and I look at my nav, which has the grid columns two over five, it's going to the two to the five of not of the grid of my header, but to the grid of the parent of the body. So it's looking at that original grid that I originally set up. And then that's the same thing over here where if we come and we find the main here subgrid and then here I put everything on the two to the four. So it's going on the two to the four lines of backup to not of its parents, but of its grandparent and looking at that grid to me, that's groundbreaking. Like that's what and the really good thing with this is and the cool thing with this is when you have units like FR, you notice that it changed when I enabled my navigation. When this top area got brought into the grid, it started going, OK, well, I only have a little bit of available space. I don't have a lot over here and these are sharing the same grid lines. They can't do that weird awkwardness that we saw happening before. So there you go. There is the scratching of the surface of subgrid. I really hope that it gives you an idea of why I'm so excited about it and why I think it's going to be something that as much as grid was a game changer, there do seem to be certain limitations that I keep running into with it these days. And I really think subgrid is going to be a solution to most of the issues that I have run into it. I realize it's not supported outside of Firefox right now. I really, really hope that that push comes and it comes soon. Grid was adopted so quickly, I can only hope that subgrid gets that push and gets adopted across the board as quickly as I don't know if I said grid or subgrid. I hope subgrid gets adopted as quickly as grid did. That would be absolutely fantastic. I'm really looking forward to it gaining more support. And I'd love to know would you like me to do a bigger, deeper dive into subgrid? Is it something that interests you, even though browser support isn't quite there yet? Let me know in the comments below. I'd really appreciate it to let me, you know, if that's what you guys would like to see. It always helps me out. If you have any other suggestions, of course, you can leave them down below. If you're new here, you've watched all of this. I'm assuming you liked what you saw. So please consider subscribing. A massive thank you to my patrons for helping support everything I do here at my channel. It really, really is appreciated. A big thank you to you guys. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.