 Hello, my friend and friends. In CSS, we've gone from a world of not having any layout tools when we had to hack things with tables and then float-based layouts to eventually getting Flexbox, then getting Grid, and now we have SubGrid. We also have container queries, and we have just so many options available to us right now. And SubGrid and Container Queries are two really amazing tools that I want to highlight a little bit today by diving into not only how each one of them can work down an actual layout that we're going to build together, but also how they can work really well together, or how they can actually completely break everything and cause stuff not to work at all. So we'll sort of explore both of those, and we'll even talk a little bit about browser support, because all the major browser engines do support them, though browser support's not 100% yet, but maybe that doesn't really matter, depending on the layout that you're making. Anyway, we're going to cover all of that, and we're going to be doing it starting with sort of a grid layout, as you might imagine, where I've set things up a little bit, where we have these cards that I've created, nothing too fancy, but we have a whole bunch of them, and you can just see I have these products like that inside of a main grid. I have a sidebar here just to take up some extra room, but it's not going to play into what we're doing today. We're going to be focusing on this grid right here, which we don't have a grid set up, that's why everything's just stacking at the moment. And then inside each one of those, we have the product itself. So we have an image, we have an H3, and then we have this div down here, which has our little buy button that you can see, and the little price here from $25. And it doesn't look good now, because we really don't want it to be this big. But yeah, that's sort of the main structure that we're going to be working with right here for each one of the products. And so let's jump in over to the CSS side of things. And here, we're going to start, let's go here where I had that grid class that I'd mentioned. And the first thing we'll do is let's create some columns. And I have that ready to go, so we can have some nice easy columns. And if we come and take a look at that, just really fast, what I did here is using the repeat syntax with auto fit. I don't want to deep dive how this is working exactly. I'll link to a video that goes into more detail on that if you haven't seen it set up like this before. But basically, we're saying the smallest we want our cards to get is about 180 pixels, though this enables it to get smaller to prevent overflow, even though I don't think we'd ever run into an issue there. And they can stretch and get bigger. And so if I, you know, we make this bigger and they have more room, we get more columns. And if we go smaller and go the other way, then they shrink down and we have, you know, it just works. And we don't have to worry about it. Nice little intrinsic layout there where the browser can figure out how big things should be for us. But you might be noticing a problem right away is that because of the images I used, they're all sort of different heights. And that's not ideal that we have these different spacing going on. And of course, there's ways of fixing this, right? I could go on to the image that's inside my product and I could give it an aspect ratio. And just then all of my images would be the same height. But I want to show a different approach using subgrid. And one of the benefits that's going to offer us because there's this would fix the images, but it wouldn't fix everything. So just for more consistently out, subgrid is really nice. And this is sort of the more typical approach that we usually actually see with subgrid. So I want to sort of start with that, but then we're going to fancy things up a little bit and look at some other use cases for it. So what I'm going to do is actually on my main grid, I'm going to do this, which is grid auto rows of 120 pixels, auto auto, and I'm going to hit save and it's going to break some stuff for a second. And to explore what this is doing, let's go in and inspect on here. And if we take a look, maybe we'll full size this just for a second so we can see things a little bit more detail here. And if I take a look at that main grid that I have, you can see now that it has the auto rows are being created. Let's turn that on here and you can see this is 120 pixels there and I know it's a little bit small in Chrome. But with that being at 120 pixels, we've locked that first row in at 120. And then my second row here is an auto and then we'd have another auto. But the reason that I went with this is if we ended up with more, so let's just shrink this down. And we just move this out of the way a little bit, we're going to have that first one's 120. Then the next one is an auto, the next one is an auto, and then we have a 120 again. So when we use the grid auto rows like this, it's going to follow this pattern. We're going to have 120, then an auto, and auto, and the next one's 120 again. And this might seem a little bit weird to set up this way. But if I know I'm going to be using subgrid, I'm thinking about this as this is the layout I want my cards to follow. So if we come now, this is my product, I'm saying cards, but we have, you know, we saw here, this is the product in each one. So because of that, if I come on each one of these, which already have a display grid, it's sort of how I'm doing this little layout that's on the bottom. But the first thing we're going to do is we're going to say that they have a, actually we'll do it up here, we're going to say that they have a grid row of span three. And that sort of just brings them back to where they were to start with. So it might seem a little bit silly, but now that we've done that, what we can actually do here, let's just turn, I have that off screen, but I'm going to turn on the main grid inspector of the entire grid, which we have right here. And you can see here's that entire grid where we have that 120 that I set up, and then the auto auto, and then a 120 auto auto. And it might seem a little bit strange, as I said at the beginning to do that. But then what I can do is because we have a display of grid, I can then say I have my grid template rows are going to be subgrid. And as soon as I do that, you notice that the picture is now taking up that first row that we set at 120 pixels, then this is in the auto and this section here is in the auto. And one of the reasons why I wanted to do this from the very beginning to set it up for this bigger grid like this and on the rows in this way is because with that setup, let's go into responsive mode here. When I'm going smaller, we turn that off, you can see here the titles, if it's a longer title takes up more room. If I wasn't using subgrid, it means that not only, you know, even if we got all my pictures to be the same height, let's just do that here actually really fast, height will be we set 120 pixels, I think we can get them all to be the same. But now what's happening is you actually see the spacing things has shifted a little bit. It's a little bit harder to see here. But if we look at this last one, the Lego duck man here is lower down than the Super Mario and we could muck around and get things to sort of all balance each other out. But it becomes a little bit more work to do that. And that's because each one of these cards right now, the rows are independent of the other cards. But if I put them all in a subgrid, now you can see actually, let's turn that back off. You can see that the bat duck, as soon as I turn on that subgrid, now you can see it's moved up and the figurines moved up too. Because now the title that the row that this bat duck is on is in relation to this one. And the rows are shared across these different elements. So right away, that's really for me, exciting with subgrid. And I can set it all up and it all works. And I know that there's always going to be consistency in my spacing and that this bottom part is always lining up properly. And I'm not going to get weird sized cards and everything just works, which is a really nice first thing. But this is sort of like, just, you know, scratching the surface, it's one of the more common tutorials you'll see on subgrid, where you get things like this, where you're lining up titles or other elements inside of different elements all to be on the same row structure that's built. But I think for me, the real like the magic of this is using this like repeating pattern that you can do with auto rows, just so you can set it up. So it doesn't matter how many rows there are. And it's always going to work. The other thing though, that is really important when you are setting that up is you do need the grid row to span three here. So and that can be that one thing, maybe you have to document that a little bit, because it might be a little bit strange or people will if somebody else comes across this, they might not fully understand it. But just to say like, I want this to span three, because I want it to take up all this room and then be part of sort of this is it becomes the grid, the shared grid, right? So just really important the relationship between the auto rows I'm setting here and the grid row span three that I'm setting up here. Now, though, let's not just look at it with rows, but there's times with columns where it can be really good too. And this is where we can incorporate container queries as well. So what I'm going to do is I'm going to come down to this stuff hamster over here, which is one, two, three, four, five. This guy right here is my stuff hamster. Let's go take a look in there. And one thing I actually did on the hamster is I added a description. I didn't put this on any of the other ones. I'm doing this with plain HTML. My thinking would be like this would be a bit more dynamic. Because this one I'm going to add in a data featured is equal to true. So if you're bringing in all like the pricing and you're bringing in descriptions and images and all of that from a database, you know, you probably wouldn't have this, but in cases where you have the data featured true, you could bring in a description as well. And you'll notice right now, we don't have one because I have gone and just a display none for my data description. So if I turn it on, it sort of breaks my layout and break stuff. So I don't actually want that to be on. And honestly, at smaller screen sizes, I don't think it would make much sense to have it because we don't have a lot of room to work with. But when we get to larger sizes, to me, that's where, okay, now it makes sense. Maybe we could do some a little more interesting stuff with this hamster. And so what we're going to do now, let's let's go with the traditional media crew. And you know what, why don't we also do it? We'll take advantage. We're going to be doing container queries, we're going to be doing sub grid, let's go all in with some nesting here too. So let's come in with that product, product, and I can just paste in that data feature true. So I'll use my attribute selector there to set things up for this. And let's, so we know it's selected, let's just say a background color of purple. So we can see it changes perfect. And this is sort of like the classic media query example where you start by changing background colors, right? Because you can just see it in action and everything. So why don't we come in here and we can do an app media. And this is where nesting is amazing. And this is a media query, we're going to switch it for a container query after, let's say 600 or maybe a bit bigger than that 750 pixels. And let's say the background color now becomes purple, let's just make it, we'll do steel blue. So it's not too aggressive. And so if we're small enough, we have purple. And when the viewport gets big enough, we switch over to the steel blue, right? So we have those two things and we see a breaking and switching between the two of them. Instead of using a media query, though, and that's because with the media query, we're looking at the entire viewport. But you know, this component's living within something else. And like maybe there's a sidebar, maybe there's no sidebar, we have all these different situations where this could live. So what I want to actually say is if the container, which is the grid that it's living on is bigger, so that just means everything has, you know, that entire grid has more room to live on, I want the styles of this to change. So to be able to do that, the first thing we're going to do is go and find where we're doing our grid. So on this entire grid, I'm going to come here and I'm going to say container type is inline size. And you can also name containers and do other things like that. You can also just do size, but I wouldn't really recommend it because most of the time I think with container queries, you're focused just on the width. So container type inline size basically means pay attention to the width unless ever you switched your writing mode to be a vertical writing mode. So yeah, I think that's the one that you're going to want almost every time. There might be some exceptions, but for the most part, that would be the one you're after. And so now I can switch this at media. And instead of at media, we're going to do an at container. And let's hit save on that. Notice how it's purple now, even though if that was my media, it wasn't. And this has to get quite a bit smaller now before we're going to switch over. And actually, we're the purple now, I should say it's the other way around, we have to get quite a bit wider before that's actually going to kick in and go over to my steel blue. And it happens all the way out here. So even though my viewports 1200 pixels wide, it's when my 950 is kicking in because of the wrapper that I have, you know, the space on the two sides here that I have, as well as this sidebar that's taking up room. So now only if the entire grid, so only if the parent that this card is living in is 950 pixels. So instead of my viewport, which is amazing. So we can bring in our container queries. But then obviously, we don't necessarily want to be changing the background color of something. But what we can do is we can say that at that size, we can say a grid column of span two. And it didn't change, but we have to get a bit bigger. And there we go, we can see it's actually switched. So I think I'm actually going to make this a little bit smaller for now. So we'll bring that down to like a 750. So as long as the parent has enough room, well, now we can highlight this card that's right there. And maybe we can also come in and say that the product description, so we're going to stay inside of here. And I'm going to stay inside that container query, we're just going to come here and say that the product description can get a display of block on it because there's enough room for it now. Now it doesn't look like there's enough room, but that's because now we might have to change the layout a little bit and we have more space to play with. So we can start changing things up here a little bit. But if we have more room to play with, well, how can I take advantage of that? And let's come and take a look at my card that I have set up right now. And you can see that here is there's the current card. Now the parents grid looks like this. And we're doing a span two. So we're going this guy's going, let's just turn that on, we're going across two columns here. Well, I want to take advantage of the fact that we have those two columns that exist. So that means here, I can also say that my grid template columns is a subgrid. And we can enable subgrid turn it on only once we're spanning those two columns, which we're only doing if the parent is big enough. And we have that room to play around with. So now that we have that, you can see that it's working. But of course, we need to fix a fix up a few things in that case. So we've turned this on, we could also say that the image is going to be a grid column of span two. And we can get that to go the whole way across. Of course, if you used area names or stuff like that or line names, it could also bring that in and move things around based on the line names. But I think just doing the span to there could be enough. We could do the same thing for the heading. So we could say that anything that's like an h2 is going to be a grid column of span two. Or was it an h3? Did I give it? I don't remember if I gave it. Oh, I did. I gave product title. So probably a bit safer because you never know what the class is going to be. But we could say the product title is going all the way across. And so now also we have more rooms so the font size could be bigger. So we could say to rim and make the font size bigger. And of course it looks kind of ugly with that grid being on, but we could turn it off. And you can start seeing like some of this is coming together. Maybe, you know, and this is where, where, what area does this happen in? Like once it spans across. Oh, the one thing I'm missing now is I do need some space, like extra spacing on the bottom. So here I could just say that there's a, it's a margin bottom of my var padding that I set up a little bit earlier just to make sure that we have that spacing that's underneath. But then we get this other layout that we can come in and have when we're at the different screen size and incorporate sub grid into that, which is really cool. And then of course we could stick with this at container, but I could bring another one down here. And in this second at container, let's say we get, when we get to 1000 pixels wide, then we could go up to a grid column span three span, spell it right. But my grid column span three. And actually here, let's go up to my image and just say that this is actually a one and negative one. So it's always, no matter what we have, it's always going the whole way across. So, you know, we get to there, then we get to this extra or another layout at this larger size. And once again, you can change things up a little bit. So now maybe my title is doing, we could maybe actually we just do this for that one. So the title is always going the whole way across the top, no matter what's happening, just because I think that's gonna be a little bit cleaner. But then when we get to this larger size, then we could also say that the description now. So we're inside the container query here, we're nested inside. And then what we could do is say that we have a grid column span two, just because we know we have more room to work with. So now once it gets bigger, we sort of change the layout again, if we go take a look, or once again, we have that main grid set up. But if I come take a look at this one, we have this grid that's based, you know, let's turn that sub grid on, it's all based on the parents grid. It's a shame they're both the same color in my dev tools here. Let me just change this one. It's kind of hard to see the overlapping grid sadly. But it's just for me is super exciting that we can have a layout of one grid that's based on another grid. And we can add to the complexity of that through container queries, which is really, really cool. But I did mention that sometimes this can actually cause things to break a little bit. So to take a look at how that can happen. What I'm doing now is I'm adding sub grid in when I have when the parent has more room to it. The other idea that you might have is a little bit the other way around, where you might have some grid template columns of sub grid on something. And then you're going to use also this at the same time. The container type inline size cannot be on the same thing as something that has a display of sub grid on it. They're incompatible with one another because of container type inline size. When we say container type we're containing the element and one part of that containment is on the layout itself. So just for fun, if I took this and I brought it down on to my product, let's just place it, I guess we can put it on this one. You'll notice it changed my layout a little bit there. And as we get more room, nothing's nothing's going to span or nothing's going to work properly. It's I'm spanning three columns, but I'm not getting that sub grid to actually work here. And it's because when I do that, when I do my container type of inline size, it means that this is independent from other things around it. So it can't look at the parent's grid anymore. So there is that limitation. It would be really cool if we could actually have both of those at the same time, but it's just something that's not technically possible as far as I understand with how the container types work. And it's one of the limitations of container types that we just have to deal with. And of course, then there's also what happens if somebody's browser doesn't support container queries at all. And or, you know, any of the stuff we've done. But if you've set things up, you know, potentially right now, everything would just be like this. And I wouldn't have that featured card. Now, maybe that's really important for your boss. You know, it's, you know, it's an essential feature. And sorry, I'm just trying to turn off that grid. There we go. Maybe it's an essential feature. And you have to have that it's really important for the have that featured card. And then in that case, this approach might not be the best one. But if you don't mind a fallback that's just going to look like this, and then people who are on newer browsers are going to just get the full experience. And just in case you're wondering, if we jump on over to can I use, let's look up subgrid support here might actually surprise you, it's at 60%, which might seem really low, but it is across all the browsers right now. So and this 60% was at about 20% like a month ago. So it is moving along quite quickly. And it's only going to get better from here, though the main limitation is probably iOS just being on 16. So older phones might not get it. But phone layouts probably not the most important thing, depending on how you're using it, it might not be the end of the world if it doesn't work, but just be very aware of that. You know, you want to make sure that you're not breaking layouts for people container queries is, you know, if you're using subgrid, you can definitely use container queries. It's at almost 90% now. And CSS nesting is probably not far off sitting at about 78%. You'll notice that there is these that with partial support, they're basically they're still changing the spec, because you can see this is still technically a working draft with nesting. So the spec for nesting is still changing a little bit. And they're actually making it be a little bit more intuitive. And they're even still talking now about changing the way sort of the order of things can potentially work. That's, we're not going to worry too much about it, anything I did here, the with the way nesting would work would work no matter what. So yeah, just some fun new things that are coming to CSS, maybe it's not ready for production yet, but next year, you might be able to start playing with these and tinkering with them a little bit more. But all things I'm really excited about. And if you'd like to know more about subgrid, I'm actually going to recommend a really good article by Adam Argyle that he recently put out to them. So I'll link to that in the description. Or if you prefer videos like this, I've done a whole bunch of videos sort of deep diving subgrid and exactly how it works. So all of those videos are available right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome who are Web on Demand, Andrew, Michael, Simon, Tim and Johnny, 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.