 Hi there, my friend and friends, a while ago I put out a video that was looking at how we can create a switch like this, where we go from four columns to one column without any media queries or container queries. And the math of it is kind of complex, you know, it takes a little bit of work to get set up, but it's easy to control and easy to do and you want to switch something you switch it. So it's like when each column can be 200 pixels, it's 200, it may get four, that's fine, I can move that down to a three if I want to. And then it's when now we have three columns and it's just when those columns can be 200 pixels wide or whatever value you want to put here. We have our gap that goes in. So this controls everything. I think it's cool. I really like it, actually, even though some people get sort of and don't like the math that's involved with it. But it turns out there's another solution. When Miriam Susan saw my video, she actually tried something out using calc inside of a condition for a container query, and it works. And I was like, what, that that works? You can do that. And then it turns out you can actually do it with a media query to which blows my mind and that just is is neat. And so I think it could be a really nice solution. Actually, I want to explore it a little bit with you in this video. So I've just completely broken the demo that I had and we're going to build it up because it's really easy. And we're going to look at how we can do this with both container queries and media queries as well. It's basically the same thing. But the first thing we're going to do here is to set up my grid template columns where I'm going to say that this is going to be the repeat syntax. And here we're going to choose how many columns we want. So I can just do three columns at one FR. And when I do that, it's going to give me three columns as you would expect. And my gap, let's just say this is a two REM. So we have some space in between them. One thing that we can still do here is if you do want to make this a little bit more plug and play is you can change what this is going to be. So you could say that this is like our column count like I had before column count. And so I could put a column count on that or I could just come here and say three is the default value. So we get three columns most of the time. But if you want to or five or whatever it is, you could just modify the custom property in the specific use case you have and get that to work for you. But obviously we don't want this to always be there. So what we're actually going to do is remove this from here. So everything is stacking and we want to use a container query or a media query to get this to work. And to have a container query work, we do need a defined container. So I'm going to do that on my wrapper just because of how I have this set up. So my wrapper is going to be a container type of inline size. And that shouldn't really change anything in how our layout is actually working right now. And so then I can come down here and I can say at container and we're going to say a min width here, like you'd expect or actually know what, let's we can use the new syntax. We can say if the width is greater than and this is where, you know, what's my column size, what column size do I want? And I might say, well, I want that to be we're using 200 pixels before. So I'm going to say that. So I'm going to say when my width is greater than and we don't want to just do 200 pixels. So we can actually come here and put a calc. This is nuts. So calc is times three, because we want our three columns. And so with that in place, we can come here and we need to say that my columns. So dot columns gets a grid template columns of my repeat three and one FR. And we can get that to be set up and we can get it to work. And so that just means that one each one of these is roughly 200. Now we have the gap that's coming in here. So you could incorporate the gap into this part as well. If you wanted to, but I just find that's it's just so cool and it works. And of course, this doesn't have to be like that. I could say this is going to be like, I don't know, 20 CH, because that's the smallest I want them to get to is 20 CH, which is probably actually it's very similar. So let's just boost it up to 30. Just we see that it is different. So in their 30 CH wide each, then we get our columns that pop in and go out. And as I said, this is being done with a container query right now. But of course, this also works with a media query. So I can just switch that over to being a media query. It's still going to work exactly as it was working. And my initial thought was this is made possible because I'm using the range syntax that we have now, but this still works. If I do a min width and do it like that, and it's still working here. And just in case you're wondering, I have tested this as far back as Safari 12, Chrome 110 and Firefox 110. And then all of them with the media query like this, it works perfectly fine. So yeah, you should be able to use it in any media query. And if container queries are supported, obviously it works there as well. So a really big thank you to Miriam for letting us know this is a thing because it's really cool. And I'm also really sort of happy that she liked my previous video on the topic. But yeah, this is awesome. So definitely something I'll be adding to my arsenal because I never even thought of trying this. It's really, really cool. If you do want to see the original video that I was talking about where you don't even use any media queries at all and see how that works. It is right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome Andrew, 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.