[0:00]Hello my friend and friends. People tell me that they can't find reasons to use container queries because media queries can do enough, but there's a really cool superpower that container queries have, which is wrap detection.
[0:11]Now, there are some limitations to this as to be expected, but uh you can see here, I have this setup to flip uh like this. And we're going to start with an image and then I'm going to show you another cool use case for this as well that maybe is a little bit more practical.
[0:23]But this image one is a little bit of a simplified version, uh so we'll look at this one first. And there's a cool twist we can do with this if you've seen a similar thing already, uh because I've found out a bonus that you can do with this.
[0:35]Uh so anyway, let's see what we can do. We're you can see I have this wrapping here. Uh it's in this split class. So I have a div there and div here for the two sides of my content.
[0:44]And we're just using flexbox to do this. So it's an intrinsic breakpoint. There's no media queries or anything.
[0:49]And I wanted to detect when this switch happens because my image is becoming too tall.
[0:55]And so what we can do for this is we can come up and or actually before we come up, what I'm going to do is this div right here. I'm going to give it a class.
[1:03]We're going to call it class equals. We don't need this name, but we're going to call it wrap detector, uh because we're going to detect when the wrap happens.
[1:11]And that means we can come over here and do wrap detector is going to be my container. So we're going to give that the container type of inline size. If you're not familiar with container queries, you do have to have defined containers for them to work.
[1:27]So we're going to do our inline size there. So we're looking at the size of the wrap detector. And I'm also going to give this a name. You really don't have to, but we're going to say container name of wrap detector, uh just so we can specify that we want to be looking at this for this one specific change that we're going to be making.
[1:41]Uh and then we're going to go look at this hero image that I have, which is my big image right here. And what we want to do is when that wrap detector is filling up enough space, we want it to maybe limit the total size.
[1:52]This is a trick I got from an older now blog post from Andy Bell that I'll link down below. This trick's all the way at the bottom, but I'm happy I read the whole thing, uh because it's pretty awesome and definitely read the whole article because it's a really good one.
[2:03]And it was over on his Peculi website, which is just full of good stuff. So definitely go and check it out. But what we're going to do here is add my container query now.
[2:13]And this is where things are a little bit different, because when you're used to media queries, you don't think of using anything else than pixels, probably.
[2:20]Uh but what we can actually do here is use viewport units. So I can say if the width is greater than let's say 75vw. And this looks really weird, right? Because you would never do this with a media query.
[2:30]But with a container query means is my container taking up more than 75% of the viewport? When it's wrapped, it's not taking up, right? It's less than 50% because we have our padding and other things.
[2:40]And then when it wraps, it's now taking up more than 75%, so then I could say something like the height of my image is now going to be, I don't know, 20 viewport height or something like that.
[2:52]Uh and it's going to shrink the image down. Now this is why it's maybe not the most realistic example because having a really big image and cutting it that much might not be the the most optimized way to be handling images.
[3:05]Uh and there's ways of doing this with like the picture element and source sets, but those do rely on looking at the viewport size.
[3:12]And this change maybe you could make that happen based on that, but this is where I discovered the twist you can actually do on this and this is a little bit more recent uh that I realized this.
[3:19]So let's come down here and I'm going to add in more of these. So we have all these extra things. Basically, it's the exact same thing but I'm going to put it into a three column system.
[3:30]And we have those down here. And it should work and in small screen sizes, it does actually work.
[3:37]Because when our wrap detector, which is now taking up all this space is greater than 75 VW, it knows that it's okay, it's wrapped and so they stack.
[3:44]The problem with that is if I put it in this three column system, it doesn't work because now my wrap detector is small. It's only taking up this much space now, right? So it's not taking up the 75%, so it doesn't detect it.
[3:57]And what I realized is what you can do is in a situation like this and it does require layering of containers, but if we have something that's set up like this and let's just go look really fast, I have this calls here.
[4:09]So what I can say on my columns is that every single one of the direct descendants, so every single one of the columns, so calls, we're going to say that the direct descendants of that are a container type of inline size as well.
[4:24]So now we have this two layered system of containers. We have the container directly on the image and then this entire piece here is also a container.
[4:35]And why that becomes important is because now this container, we can switch this 75 VW for a container query width and that's kind of crazy.
[4:44]Uh but you'll see that it actually works and it limits the height of my image now. And so it's aware of the space it has in all of these different situations.
[4:53]And that's I think pretty awesome that we can do that. Using it this way does require that. Uh it will fail block to the viewport unit, so it's not the end of the world.
[5:00]Uh if you don't have another defined one, but it won't really give you that magic. And let's because this container, which is my wrap detector is then looking at its containers container query width to get that unit to work, right?
[5:16]So it's this weird inception of containers that's going on, uh but super happy that that works. I think it's a really fun trick and you could actually, I think it might break the top one right now because I don't have it set up correctly.
[5:25]But I could actually say if the width is equal to 100 CQI, so if I know it's filling up the entire container, then it's going to click in and and actually work as well. So that's another option.
[5:36]But I think it's safe just to do this in case you have padding or something else, uh and just really fast while we're here, we could switch this out for an inline size. We could switch the height for a block size.
[5:46]And we can do this as a CQI for inline and then a viewport block for block size if we want to use the logical variants, and we'll have the exact same result.
[5:57]So, yeah, really cool, but again, maybe doing it with an image isn't you're going like Kevin, I'd rather do this with something else than than images.
[6:05]And I just realized my camera is very orange today. I don't know what is up with my white balance. I do apologize for that.
[6:10]But here's another version that I think might be more interesting because you can have it working with text and maybe you want different layouts depending on the space that's available.
[6:17]This is uh maybe not the exact situation you would use it in, but here I have this overflow grid.
[6:22]And I'm using for my overflow grid, uh if the width is greater than 900 pixels, it just goes to four columns.
[6:30]So it's regular, but when the width is below 900, it's going to be overflow. And this is primarily set up because on mobile, this could be a nice experience, right? You're swiping left and right, it's better than on desktop.
[6:40]On desktop, if it's overflowing, it's a little bit weird that we're going like this, but I'm squeezing it into the sidebar and I don't want to use a media query because the media query would affect this one down here.
[6:51]So, but I I don't want it to work this way. Maybe I want the scrolling now to go up and down so it accommodates larger screen sizes better, because it's easier with a mouse to scroll up and down.
[7:00]So, we could do the same thing. I already have my containers and everything set up because we can see that we're detecting that there. Uh and now I could say is container, and we're going to use the same trick, container, and here I'm just going to come in with the width.
[7:11]And this time I'm going to say less than because I want this to happen if my container's in a split situation. I've already handled the other parts. If it's full size, it's completely fine. Now I'm handling when we're getting into these smaller situations, but not smaller screen sizes, larger screen sizes when it's getting pushed into a smaller space, right?
[7:29]So here then I can say less than 75 CQI and we can change then my overflow grid direction, which I have set up with a custom property and I can make this be a row instead of columns and that should switch it.
[7:42]And you can see it becomes rows and it's actually stacking now. That's kind of awkward though. So maybe we could also do something like the max block size, uh is going to be, I don't know, 30 VB, and I'm also using CQI here. I guess this could be inline size.
[7:58]We'll stick I'm mixing up logical and and physical sides on things. It's a little bit weird. Um, but we're getting there and then here I could say that my grid template column is just a one uh FR and that should be columns just so it fills up the entire space now.
[8:14]And now this becomes something that works this way, uh and then when I shrink down, because now it's going back to this version here, we get that layout and then it detects that it's, well, not wrapping, it's like inverse wrap detection here, where it's when it doesn't wrap and we're in a two column system.
[8:32]We're changing it to go that way around. So, yeah, a few different ways that we can sort of take advantage of this. Again, there are some limitations to this.
[8:37]You can't do it with like flex box wrapping. If you're just doing a flex wrap, you need to have sizes on these things for it to work or there's going to be collapsing and there's problems you can run into, but for these types of use cases, I think there's some interesting patterns that we can be using and that people need to sort of step out of the box a little bit with container queries to really take advantage of them.
[8:55]It's not a replacement for media queries. We need to use them a little bit differently to really unlock some of the really good things that they can do. And just really quickly, I'm going to say if you enjoyed this lesson, this would be something you could learn a lot more about it in my course, CSS Demystified.
[9:04]It's version two. I've just completely redone it on a custom course platform and in the fourth module, sort of the third module, because we have the introduction one.
[9:14]But I do have a whole section on container queries, dealing with multiple containers, how they're smart, how they can work together, talk about wrap detection like we did here, and a lot of other fun use cases for them as well, as well as, you know, lots of other stuff in the course.
[9:28]The link for it is down in the description if you want to learn more about it. And with that, I want to say a very big thank you to my of awesome Johnny, as well as all my other patrons and channel members 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.
