 Subgrid is going to change the way that we make layouts and I want to explore that with you in this video because it is Subgrid Awareness Month here on my channel. If you're not already aware of what Subgrid is, it's just a super powerful tool that it seems like everybody's forgotten was supposed to happen. And this month for me on my channel is Subgrid Awareness Month to show how amazing it is, why we need to care about it. And in this video, we're going to be looking at something where if we just used a regular grid, it doesn't solve our problem. We'll see that it actually is solved by Subgrid and how you can actually do it. So as a really basic example right here, you can see that this is without Subgrid. And this is interesting. I'm going to show you why, but you can see here everything looks okay. And we get to hear like all these cards start acting a little bit differently. And that sucks, right? And why this is interesting is I have my card grid set up, which is putting everything on a grid itself. And we're going to look at the grid because I have my DevTools off screen here and I'm just trying to here's the main grid. So you can see the main grid that everything is laid out on, which is why the cards are doing, you know, the sizes they are. But individually, we have these grids inside and each one of these grids is behaving differently. And why that's interesting is because if we look at this, my card class here, if I go and look at that dot card is a display of grid. And all of these are set up with the same grid template rows and the same grid template columns. And despite that, they're all acting very different from one another. And if you're looking at this going, what are grid template rows and grid template columns? What are you talking about, Kevin? This is just part of the regular grid syntax. And if you don't know about that, or you haven't explored that yet, it could be useful to have a basic understanding of grid before really diving into what Subgrid is. And there should be a card popping up now, or there's links also in the description that dive into what that is and what that's what grid itself is all about. And with that said, even though they're all using the same grid and the same setup, because the content inside of them is different, they're not acting in the same way, because the FR unit, and even you might be going, well, Kevin, that's because of this. But even if I did a one, if our one, if our, it's going to be the same situation where it looks fine. And then now that that's refreshed, the images will load in slowly, but you can see that everything is still acting differently. And that's just because the content, the control the content has. And in these cases, it's because some of them have long words, some of them have short words, and those words are having an effect on the available space. And that has an effect on how the FR works. And you could come in with more fixed sizes, but then you could run into issues with overflows and all that. Or we could just set it all up with Subgrid and everything will just behave how we want it to. And we don't have any issues whatsoever. And that's what we're going to be looking at how we can do in this video. So let's go back to this example here. And I'm going to call this start, and I'm going to link to both of these in the description below. So if you want to follow along with this, you can, we're going to call this one end. Yeah, just so you can follow along and turn this into an actual subgrid. And it's not too difficult to do. So we have my main grid, and this is what's really important is this main grid that's right here. And what I'm actually going to do is because of, I mean, we could leave one FR one FR, but we want this to be four columns instead of two columns. And that's because we want the grid, the cards themselves are going to share the parents grid. And so we could set this all up with one, you know, we'll start with that, and then we'll switch it out for this. So for now, just for simplicity sake, we could do four times one FR, we could just say repeat four, three, four comma one FR. And when we do that, we see that we have our four columns now. And once again, they're all doing something a little bit different because some of them have long text, some of them have short text. And it's just the nature of the game a little bit with grid when we get into these types of situations where the content does have an influence on things. But we're going to see how to fix that as we go through this. The next thing that's important is each one of my cards. Here we're going to say that it is a grid column. We need to say span two. So we know that each one of those is going across two of them. And there we go. That's working beautifully. Now here is where it gets interesting though. Instead of using these, the original grid template columns that we had, we need to have a display of grid. That's very important for a subgrid, because you can't be subgrid without a display of grid first. And it's not a display of subgrid. It's where you do your grid template columns. And you can also do this for rows. Rows are a little bit funky in how they work. There's some gotchas. We're going to be exploring that in another video. But here what we're going to write is subgrid. And yeah, the columns, the columns work much easier than the rows, but the rows are wonderful once you understand how it works. And you can see as soon as I wrote subgrid on there, everything just started working and popped in. And now they're all behaving the same way. That was it. That's all we had to do. And the reason that that's happening, let's go and open my dev tools again and turn on the grid previewer. So now you can see in Firefox, I have my main grid. So we can turn that on and see the main grid. And everything is living on there. And then I can also turn on my subgrid. And the subgrid for this card is following the main grid. So you can see that all of these are living on the parent grid. And that's just so, so powerful. And you'll also notice a few interesting things here. If you don't on the card, which is, so this is my subgrid, everything is going to follow the parents grid. So it's following these rows and the columns that are just, you know, set up here. But on here, if I change the gap on the subgrid, it will change the gap that was set up on the parent grid. You can see that we actually have like these overlapping columns a little bit. So you don't have to keep the parents column. That's why here you can see that the elements are going on the inside. It's going to equally shave from both sides to move inwards. But you can, you can break off if you need different column systems or if you're using the grid template rows, you can use different row gaps as well. If it's important in your subgrid. And I found the spacing a little bit strange when I was setting this up. So for me, that worked out really, really well. And you can see how simple that is. Instead of setting up your own grid template columns, you just set up a subgrid. It's going to live on the parents grid and the grandchildren. So like this title here is influencing the main grid, which is all the way up on like the grandparent instead, right? Which is just absolutely wild and really, really cool and really, really powerful. And it just makes like consistency with layouts like this. It unlocks a new level that we didn't previously have before this. And just to, I promised you, we'd step things up a little bit. My original grid template columns was this one. Now, sadly for that, there's no repeat that you can do there that I know of. If you can, let me know in the comments. But you'd probably just have to set it up like this one, two times. I do it on different lines just to make it a little bit more readable. But that's the same as having it like this. So we have one column of that original one I had just makes this a little bit narrower. And then my text takes up one FR, which is the available space. And then we just do that again, there. So one, two, three, four, we have my one, my two, my three, my four right there. And again, I just find it makes it a little bit more readable sometimes to break it onto different lines. And this is just literally scratching the surface of what we can do with this. This is a really basic example of just the better experience we can get with it. But we're going to be diving in so much deeper as this week goes on. So if you're not yet subscribed and you want to see more of subgrid and what it has to offer, please do consider hitting that subscribe button. So you don't miss any of those videos. And as I mentioned earlier, if you haven't really dove into grid and now you're like, holy crap, I need to learn grid. So once subgrid is better supported, I can start taking advantage of that. There is a playlist for you right here that covers the normal grid rather than the subgrid. And with that, a really big thank you to my supporters of awesome over on Patreon, Zach, Randy, and Stuart, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your point on the internet just a little bit more awesome.