Container queries are possible!

would you like to make a website without any media queries what about having a container query that's looking at the size of the parent rather than the size of the viewport does that sound cool check this out what you see on the screen right now there's no media queries involved in any of that and it works you wanna know how keep on watching i'm so excited for this video and just before we get to that if you are new here my name is kevin and here at my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and i do want to say a big thing before i start in this this idea isn't mine and how this works it isn't mine um it's an idea called the holy albatross and it's by hayden pickering so i have linked to his site as well as the two blog posts where he talks about it down below they go into a lot more information on like how he got the idea for this in the first place um but it's just absolutely amazing i had to share it once i figured out and really understood how it worked it's something i've known about for a little while but it took me a while to really have the time to dive into what i have done is put a few timestamps down below because i'm really going to go into how this works because it is a little bit of a css hack so i want to explain all the different steps so you really understand what's going on but if you really want to just get like the juice of using it you can use the timestamps below to see the different parts and you can sort of join in where you want to join in i would really also recommend checking out hidden site as well as every layout which he's done with andy bell there's some really cool ideas over there on how css the the types of ways we can treat layouts with css which are really really cool and with all that out of the way let's jump in and see how this works because i don't want to wait anymore this is too cool i don't want to wait anymore but let's dive into it all right so let's jump into here in vs code and i just want to show you one thing i've set up is this here at the bottom which is uh the width of my columns and we'll see what that is in a second but i just have a little watcher there that's paying attention to what the width is because that's going to help us out um as we progress through that so it's my width indicator right here um and the first thing i'm going to look at is the issues with flex i guess in a way um so if we look at my markup i have my container and then i have this div of columns which i have three cards inside of and the idea here is if i do my columns and i do display flex on that it's going to give me three columns so that that's perfectly fine there's nothing wrong with that um but then let's give this a um let's leave it like that just for a second and the issue the big issue here is if i go small they sort of really squish and then at one point if they can't squish anymore they'll overflow um but if i go bigger and bigger and bigger like i'm going you know they're hitting my container size which is why they're not growing anymore um and there is a maximum size that they'll reach to um but let's just you know for now we have them going like that um and here actually in flexbox we had a gap so let's add a space in between them this is actually i'm not even sure uh can i use has this hit production in chrome yet oh it is look at that it's getting there it's only at 40 support so maybe don't use it yet but uh for this stem i'm going to use it because it makes my life easier so we have that but that's great but you know at these small sizes that's an issue and one thing we can do to actually fix that um is we whenever we have a display flex we can also do a flex wrap of wrap and the idea with this is if there isn't enough room that they'll actually wrap instead of overflowing of the side which is a good thing um because if we had 10 items they would just shoot out the side like they don't want to but when i do that well now we run into this issue of here they're they're small and they're going like that but now they're never coming up one next to each other and that's because when we have the wrap on they want to get to their natural size which is um in flex they're going to match the content that's inside of them so actually let's just come back here in this middle card so my second card right there um if i add a little bit more lorem so let's add lorem 20 20 new words of lorem um and so now you can see that one's actually getting wider because there's more content in there so it's trying you know it wants a single line like that it's gonna grow to the size of its content by default and you know what i think we could actually leave that on there it might help um show everything we're doing so we get this thing where they're all different sizes even now which is kind of awkward and there's a few different ways that you could approach this so what i'm going to do is just to show one thing we can do and this is one of the really important things in understanding how um how this holy albatross works because it has a really strong reliance on something called flex basis you don't know about flex basis and a lot of people don't it's sort of setting the defaults or the ideal size of something how big you want that thing to ideally be so right now they're sort of set to max content right so they're they're trying to match their content but i can tell them a different size than that and if you don't set a mac a flex basis it will use the width like the auto on this if i set a width on these guys so if i didn't width here of say 50 pixels they're flex oh this is blank got a little error there but they're gonna go down to 50 pixels um so if there is no flex basis they're going to use the width but if you set a flex basis it will actually override the width i believe um so here what i want to do on my flex basis um let's just go with 100 for now and this is now you can see that they're all growing and they're all like they're all trying to be 100 so we don't get that weird issue where they're not the same so flex basis is sort of saying the ideal width but you'll notice that let's say i put this down to 50 they're they're 50 but um they will stop at one point they're not going to keep being 50 so whatever the flex basis is it's the ideal size that you want them to be and this will be the same if i set this at 400 pixels they're 400 pixels they're going to stay at 400 pixels until i get to here now they're going to start shrinking so again this is the ideal size but it's flex is kind of weird when we use flex it's not dealing with absolutes anymore even if we set an absolute so that's really important to understand so that's one of the concepts flex basis it's an ideal size that something wants to be the other thing is the default for um flex items so when you have a flex item notice how there it was shrinking and that's because by default items have a flex shrink of one which means they're allowed to shrink and they're all going to shrink at the same speed they also have a flex grow on them but the flex grow by default is zero meaning they won't grow so the flex basis is 400 we'll turn that back on for a second so they're they want to be 400 and they're not allowed to grow but they're allowed to shrink so we're saying be 400 pixels but if you don't have enough room you're allowed to be smaller but you're not allowed to be bigger and that's the flex grow being at zero and that's the default for them but this actually uses a very healthy use of flex grow and turning it on so by putting the flex square to one now it means they can grow and they can shrink now the thing that's interesting also with this though is when we start getting to bigger screen sizes remember they're allowed to grow but they want to be 400 pixels so what if there's room for two of them to fit next to one another well that's going to happen they they want to be 400 so if they can be 400 pixels they're gonna shrink back down but now there's not enough room for three of them to go next to one another so even though the let's just move this down like that a little so there's enough room for two of them but not the thirds you get this really awkward layout in a way you get two columns and then a third one there and maybe sometimes that would work for you and if we go big enough i don't have enough room if i made this smaller let's just do 200 we should be able to get three columns those three columns will turn into this weird layout like this and then at small sizes they'll stack on top of each other but with a healthy combination of your flex grow this we don't need because that's the default but with your flex basis and your flex grow and a flex wrap of wrap because if the wrap was off here they're not gonna wrap so it doesn't really matter they're always just gonna be next to each other so you need to have flex wrap on which means if there's not enough room they can go underneath and then if it does go underneath uh if i didn't have flex grow on we would get this where they're not growing and you get this one little lonely guy sitting there and it looks kind of awkward so my flex pro is saying okay i can stretch the whole way across cool all the way along so far um if you're if you're not sure you i would really strongly encourage you to play with this code like follow along with me here do some stuff because there are some things in here that are a little bit strange for sure so if you follow along or play with the numbers do what you need to um just to try and reinforce what's happening here and it will click you'll figure it out as you go along um so here that's working so we sort of get this it is a responsive layout which is nice but this middle zone is kind of awkward now there is another thing though that's really interesting with flex basis if it's a positive number let's just put one here one pixel the ideal is one pixel but they're allowed to grow so they can be bigger than one pixel to go next to one another huh okay that's cool but something interesting with flex basis is if it's a negative wanna guess what's gonna happen before i hit save let's go and take a look bet you didn't see that coming maybe you did if you did good stuff um but when it's a negative number i it will stack no matter what you know i'm going huge i'm going small they're stacking one on top of each other um so that's kind of interesting right so knowing that if it's a big if it's a negative number they stack but if it's a positive number that they go next to one another how could we get all that to happen without having to make any media queries here to change it we can use calc calc is amazing calc is awesome so on my flex basis here what i could do is give a size and this is why i have this guy on right here so i'm going to give 500 pixels and i'm going to minus 100 now this is and you see i saved and something happened there so 500 pixels minus 100 well what does that mean so my flex basis is 500 minus this number because 100 always looks at the width of the parent and if this case the width is columns that's what the number here is showing me so this isn't looking at the viewport this is looking at the columns and i guess if you want to do this more like a media query you could set this up with viewport units instead um but i the fact that this can be a container query is just so cool um and we're not all the way there yet this isn't going to solve our problem but it gets us really far along um so what happens here is if we're above 500 pixels we have a positive number here remember positive number was giving us columns and if we shrink this down and wait for it it's gonna happen around 500 won't be perfect but around oh ah look it is at 500 okay oh no right around 500 as i said uh i didn't think it would be exactly at 500 and now all of a sudden it starts wrapping and if i go a little bit smaller we'll get to there where they they collapse on top of each other and just to show you that this really is an approximation if i bring this all the way up to like 800 pixels it's not going to happen at 800 because you're going to see here it's working but when it now it's at like 600 when it's making the switch instead of closer to 500 where it was before and it's still not exact we're still getting that two-column thing before it stacks one on top of each other this is just because of the nature of flexbox where it tries to fill in that middle ground automatically it's an ideal size it's not an absolute size right that's the whole idea behind flex basis but is there a way we could push this number to be really big and if it was a really big number maybe just maybe it's going to behave the way we want it to so i'm actually going to take another calc here and i do want another calc because i want to make sure that the subtraction happens first so i'm going to do a calc here all the way around that and we're going to say times 999 and it doesn't have to be 999 it just has to be a pretty big number and what that's going to do is because the number is so big it actually so it's saying once this becomes a negative number it's gonna be a really big negative number and once it becomes a positive number it's gonna be a really big positive number and what that does is it takes out that middle ground uh that we were dealing with before where flexbox was trying to fill in the gaps a little bit so let's put this to 600 and see how it works so below 600 pixels now we're stacked and then when we get to 600 oh my god and look at this this should be exactly they're 5.99 600 like as soon as i cross that boom we got three columns isn't that sort of magical like super amazing magical like boom magical and the fact that like it just works i think this is so so cool now in his article he also does suggest setting this up with custom properties which is a nice way to push it as well and of course you don't have to use pixels here i could do something like i think it'd be around 35 am ish i'm just ballparking that but that's close enough there to 600 so you can use m's and other things like that um so but definitely if you want to set this up with a custom property it could be a little bit more robust as well i'm not going to dive into that right now but what i do want to show you is the power of this in another sense um which is how we can actually use it in a bigger way in a sort of a more important way and here i have this other div that i've created called another section not the best name in the world which is right over there and so what i'm going to do actually is because we have these columns and all this is already set up we can actually come in here and my container i have my columns and i'm going to wrap that it's maybe not the best i know i can do the wrap thing or whatever uh another section and it's gonna close there so i'm just wrapping this let's just look here i end up with two children i have this is one child which is my three there and then i have this white section down there so let's hit save on that and now we get this two-column section um i'm also gonna get rid of columns because it's finding let's just turn off that width indicator because it's finding the wrong one didn't plan for that so we'll just hide you away for now um or even maybe i could switch that over after but what it's going to be doing is notice how now uh what i've done actually just for that other section i have set a max width on it so even though the flex draw on that should be one a flex grow won't overwrite a max width so here i have a max width on that it's like a sidebar section what's really cool here is um or actually [Music] maybe we don't want that let's turn off that max width i have another solution that we can use instead of that right here max width we'll turn that off um and instead of that what we could do is change the flex grow on it um flex grows like a scale so one means if everything is set to one they'll all grow at the same rate but i could put like a 0.2 on this which means it's going to grow a lot slower than the other ones which it won't set a max width on it but it should set oh yeah it should set a maximum size the only problem is that other section is coming after this there we go that'll fix it um so the flex girl on that will be limited a little bit maybe that's a bit too small uh let's go with a four um so the cool thing with this is it's not looking at the the viewport which is usually what we're looking at this is looking at the chilled the container that it's within so it's looking at that columns that is right here um so here if i look when it grows boom we're getting two columns right there but even though this hasn't switched so we're getting two columns and these are staying three right here and what's really interesting now is as that continues to grow at one point this area here is gonna hit our 35 m and boom it goes to three columns there and we end up with almost a four column layout here so you have your sidebar and then you have the different parts in that and then it works and everything is fine and then again we shrink there we're not getting this weird middle ground where this strange stuff happens um so it's really really cool how that can work and so you get once this big parent is at 35 m in width it's switching from two cop from stacking to two columns and then once this child here is getting to 35 m in width it's switching right there boom to be three columns over there so it really is like a container query it's looking at the width of the container it's not looking at the width of the parent i don't know about you but this for me is really really cool and completely not only can reduce our reliance on media queries but it can also the fact that we can look at the the parents size is just really really cool and a lot more versatile it makes it so we can really focus on the bigger elements it might seem a little bit hacky to you like it's definitely not like this like super clean solution we do have to push things a little bit but it there's nothing wrong with that we've been using css hacks forever and if anything this is a really clean one compared to some of the stuff we used to use so i am so excited about this i really hope you're really excited about this too if you are and if you think this is a really cool solution you can see yourself using please do leave a comment down below to let me know about it um i really strongly recommend that you do go check out those are the the two articles by hayden so thank you very much for watching if this is your first time here and you enjoyed this video this is pretty much what i do here we try and have fun with css explore css sometimes it's more deep dives like this on pushing things a little bit sometimes just having fun building a layout and everything in between as well we jump into design all that stuff if that sounds good and you haven't yet subscribed do please consider subscribing thank you very much for watching a huge thank you to my patrons for helping make all of this possible your support is absolutely amazing and blows me away so thank you guys so very much and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 138,121

Rating: 4.9617043 out of 5

Keywords: Kevin Powell, tutorial, html, css, css no media queries, css container query, container query, holy albatross, heydon pickering, css holy albatross, website without media query, no media queries, css trick, css hack, flexbox hack

Id: fuiEYR6Hoe0

Length: 17min 29sec (1049 seconds)

Published: Tue Aug 04 2020