Container Queries

[00:00:00]
>> Steve Kinney: There are still some problems that we can solve here. One of the things that is interesting is responsive design thinks about the viewport. So if we did something like this, we put this grid in something that's got a class with a max width of. You can. Let's see, there's like.

[00:00:30]
Yes. Yeah, let's give it a max-w of 3xl, right? So it'll never actually hit that large break point. And it will, right? But you can see that spiritually it has. We'll even make it smaller than that. We'll make it. Which is. As the viewport grows, it does switch the responsive design mode, but the container didn't grow, right?

[00:01:01]
And so that looks gross. And for a blog layout, fine, whatever. Who cares? But there's lots of times where it's like, you might. Yeah, when we only have one thing, that seems fine. But what happens if we have a set of cards, right, that we will maybe wanna put them in a sidebar?

[00:01:21]
Maybe we want to put them in the middle. Like we have this reusable element that we want to happen all the time, right? And I don't want to have to sit there and make 10 versions of this component to have it laid out different ways or have to tweak the classes every time.

[00:01:34]
I just want to say, like, yo, if you're the only thing on the page, sure, sure, sure. Do the responsive design stuff. If I throw those cards in a sidebar, don't start to responsive design yourself based on the window. I want you to care about how big the parent you're in is and react to that.

[00:01:54]
This is something that you couldn't do really for the longest time. Then CSS came to the rescue. We got this thing called container queries. And so, a lot of these responsive design breakpoints are based on the viewport, as we saw over and over and over again. Container queries are a way to say, in the same way you used group before, right?

[00:02:20]
Where you say, this parent we care about, you can basically say that any given element is a container, right? If I start with this and I just say container, nothing happens. It's the same group. Nothing happens either. Because you said, yeah, cool, it's a group, it's a container.

[00:02:47]
Neat. Then Tailwind gives us this syntax now, where this lg, this md, all of this stuff is for the viewport. But if we give it the @, then it's for the container and you can kind of see ntainer, because that's the syntax. It's like a media query, hence the Sign also the other one was taken is greater than 32 rems then this is what I want it to be.

[00:03:20]
So arguably I wanted that. Let's get rid of that responsive design one. That's the rows. We'll put an in front of both of them. Right now it doesn't care necessarily about the window. It cares about the size of its container. Hold on, do I have all. I have the call spans happening too.

[00:03:47]
So we got, Right, I still have that screen kicking in but as you can see because the. Let's just get rid of that, cuz that wasn't helping us. You know what, let's follow it all the way through. Now since that container didn't hit the threshold, these don't switch.

[00:04:14]
So now you could have like cards that like hey, if the container you're in is big enough to do a four by four grid, great. If the container you're in, if the parent element you're in is only big enough to have a single column, fine. It's no longer based on the actual viewport or you're doing a bunch of.

[00:04:30]
I'm gonna use React's context API, then pass on window resize. Now all of a sudden you don't think about that anymore. If I all of a sudden took out this max width. Actually let's leave this full size going to take out this max width here. Let's see container.

[00:04:59]
So we never hit it high enough. Let's change these for a second. What happened Container with quick mistake that I made was like you do an container not just container which makes sense with the there otherwise there was a class in tailwind called just regular container which was to do at every viewpoint a max width that still works.

[00:05:39]
There's one if you want sensible. If you don't want a page to always take up the full screen. There is this just regular container that is built into tailwind that is a legit tailwind class. It pre existed container queries which is a CSS feature which has the name container in it.

[00:05:56]
So made a quick boo boo @container, gets you into the container queries where now, again, it can take up the full width, great, it's here for it. And if you give it a max-width, let's make these as I played around before, let's make these a little bit bigger again.

[00:06:31]
32rem, that gets to. So the one thing to keep in mind is all like they are and this drives me nuts as you can see. It's driving me nuts right now. Which Is you're like, why isn't it working? The breakpoints for containers are all less than they are for the full viewport, which makes sense if you think about it for more than 30 seconds, which is obviously any given container is gonna be smaller than the entire viewport.

[00:06:59]
So if you look this max width X and this is where the hovering becomes important, it's 36 rem. This breakpoint for LG, my good Lord. Is 32. So it is actually working as expected, but not what I wanted to. So we can just kind of, let's just make this max width MD to make my point, which at this point they never change, right?

[00:07:22]
But if I get rid of this or make this larger, you can see that if the container gets to the point where they fit, they will change and change their layout. So now I could throw this same layout into a very small sidebar. They're gonna be stacked. I can throw it into the main body of the page.

[00:07:42]
They're going to have this view here. I could throw it various places. They will react not the overall size of the screen, but to the container that they are in, which gives you a whole bunch more flexibility than ever before. And again, this is a relatively new feature.

[00:07:59]
Let's see. And so that's something to keep in mind that if you are still supporting older browsers, something to think about. That said, if you use something like post css, you can a lot of times retrofit this back on with a polyfill, but just out of the box.

[00:08:18]
But we're talking 2022 forward, right? Again, IE11, you're out of luck. But like most browsers, let's say from like 2023 onwards, right? So like I feel pretty safe about that. And the nice part is your site doesn't break. You would just get that earliest breakpoint. So effectively it is a progressive enhancement in a lot of ways where you can solve for that other version, you can run it through post css, you can do any of those things and all of that just works.

[00:09:02]
I'm going to take one moment to just re explain the little gotcha that I stumbled across before, which is I had container and I hovered over it knowing something was off. But you can see it is some tailwind magic and there's some stuff in there. And then everything started working again when I put the in front of it.

[00:09:20]
There are some reasons container queries, a CSS thing, that's when we had the container. But prior to that there was a tailwind nicety of A class called container. And what container is useful for is, a lot of times, especially if it's a blog or some kind of content, you don't want the text to take up the full width of the page, right?

[00:09:44]
You want it to kind of stay to the point where it's readable. So this container class was used for a really long time, which is by default it's like a responsive design thing where at the smallest viewport is 100% and then each time it applies a different max width so you always stay in some kind of readable like sense.

[00:10:05]
So this is just not container query @container, and I put it mx-auto so it just centers in the middle of the page cuz a lot of times you see those together, where okay, it's 100%. You kinda see it break at different viewports, right, where each one it kinda fills a new maximum content.

[00:10:24]
And eventually if I go all the way it will never get too wide. And so that's just the regular container. It's useful for text content and stuff like that. And that is a totally legit class that works. And if you are talking while you are typing, you will accidentally forget that this one means the container queries which are real CSS feature which unfortunately have a name that conflicts with an old tailwind nicety that they also can't get rid of because then it will break everything.

[00:10:52]
So the web continues to be the web, everything is good, life goes on. But yeah, for container queries, if you're using in the breakpoint you should use to define the container because again, like what's really cool about this is, you know, I could have something where like it only matters what the parent is.

[00:11:16]
Big wide section. Yeah, make it a 4 by 4 grid. Throw that same component in a sidebar 1 column. I never think about it again. I never write JavaScript, I'm never sitting there like handwriting. The classes, things just work as they move around. Life is good.