Container Size Queries

[00:00:00]
>> Jen Kramer: All right, so I have a couple of things here to start you off with. First of all is the reference CodePen here. We are gonna build this exact same item that we built earlier in the grid layout using media queries. We had all of these cards here.

[00:00:19]
I've removed that titles that we had down here in the bottom. So we just have these five cards in this crazy layout, and they do change over space and time. Okay, so this is what we did with media queries. And now we're gonna try rebuilding the same thing with container queries.

[00:00:36]
So let me show you here what I'm talking. When we take a look at this design here in this demo, we have several different layouts for our cards, right? If we go all the way down small, here's one layout for the card. If we get a little bit bigger, here's a second layout for the card.

[00:00:58]
Looks like this, okay? We get a little bit bigger still, here's a third layout for the card, right? And I think actually down here, I missed one. Here's a fourth layout for the card, make sense? Four different card layouts, and I put them all in one slide here for you.

[00:01:19]
So the difference with container queries versus media queries, with media queries we were concerned how wide the viewport was, and we adjusted everything to that viewport. Now we're gonna turn that mental model around, and we're gonna say, let's just build cards that look this way at one dimension, this way at another dimension, this way at another dimension, and this way at another dimension, and we'll just plug those into our pages.

[00:01:44]
So in other words, the media queries are not doing anything to change the way the cards look, depends on the size of the hole where the cards are fitting. So that kind of makes sense?
>> Jen Kramer: Okay, well let's try building some of this and we'll see how it goes.

[00:02:02]
All right, so in our beginning CodePen, what we're going to do is the following. Here in our CSS, nothing is different than what we had earlier. We have a series of articles, these are each cards. They are inside of a div with a class of photo cards. Basically, all the things that we looked at earlier.

[00:02:23]
So now what we're going to do is the following. We are going to set this up for .card.
>> Jen Kramer: By the way, just so you know, I've removed all the formatting from before. This is just the HTML that's here, okay? So there's no media queries or anything here in our starting code.

[00:02:45]
What I'm going to do is give this a container name of card and I'm gonna give it a container type of inline-size, okay? So this is the way you're gonna start all of your container queries. You're gonna give the container a name. In this case, it's a card, so we might as well just keep the same name.

[00:03:08]
Although you could call it whatever you wanted. If you wanted to call this George, feel free, it's your documentation. Okay, and then container-type of inline size, that is something you are always going to use with container queries. There may potentially be other values in the future, but at this point in time, there is only one that makes any sense, and that is this one inline-size.

[00:03:30]
What is inline-size? Because this is a trend that we have going on in CSS. Do you know what is the inline-size? The opposite of which is the block-size.
>> Speaker 2: Like the height of a row?
>> Jen Kramer: Yeah, you're on the right track, you're on the right track. According to logical properties, which is a whole new CSS spec, the original CSS was written with left to right in mind, right?

[00:04:02]
Cuz it was written by people who spoke English, people who spoke European languages, most of which all go from left to right, okay? But as you know, there are many people in the world who read right to left languages. There are people who read vertical languages, especially like in Japan and Mongolia, and so forth.

[00:04:21]
So what the W3C has been trying to do is to get left, right, top, and bottom out of our code. So inline for us in the left to right world, inline is basically like widths in the horizontal plane and block is vertical, okay? If we went to a vertical world, inline would be the across and block is still up and down, but it just changes the perspective of the text.

[00:04:53]
It kind of makes sense vaguely? Yeah, it's a lot to wrap your head around but when you see inline-size, just think, okay, that's my left to right.
>> Speaker 3: It's still kind of related to the flexbox, flexstart, flexend, not left and right.
>> Jen Kramer: Exactly, the start and that's all part of logical properties, yeah.

[00:05:14]
Okay, so, now what I'm going to do is I'm gonna focus my designs here on the cards only. I'm not gonna worry about where the cards are placed in space, I just wanna make changes to how these cards look depending on essentially the width of my container. Now my width of my container at the moment is going to be the width of my screen.

[00:05:37]
That just happens to be a coincidence for the way that I'm coding this right now cuz of course, I have all these cards here. They are as wide as their parent which is photocards. How wide is photocards? It's the width of the screen. So everybody is as wide as the screen at the moment.

[00:05:53]
I am gonna squash this all the way down to like 215 pixels to take a look at this. And we're gonna write our first container query. So this is gonna look like this, at container card (min-width: 200px). So at at least 200 pixels, we're going to do something here.

[00:06:19]
So let's try this, just card h2 { background-color: red, okay? Just to see if it works, always a good thing to do, anytime you're trying new code is just to write yourself a really simple example to make sure it works. If I get smaller than 200 pixels, look it's not red.

[00:06:41]
If I get bigger than 200 pixels, look it's red, okay? So far our code is working, okay? Now that is for the h2 on the card, what if I just said card background-color: red? Any one want to take a guess what's gonna happen?
>> Speaker 4: Wouldn't it just like get all of them.

[00:07:04]
>> Jen Kramer: Make all the cards red? How many say it's gonna make all the cards red? How many say it's gonna make none of the cards red?
>> Jen Kramer: Okay, if I change my selector here from card h2 to just card, so the background-color is red, will all the cards be red?

[00:07:24]
Will none of the cards be red?
>> Speaker 5: Should be all the cards.
>> Jen Kramer: All the cards will be red, right? Make the only thing that makes sense.
>> Speaker 5: A whole card, not just a-
>> Jen Kramer: We're doubling down. All the cards are gonna be red.
>> Jen Kramer: None of the cards are red.

[00:07:41]
[INAUDIBLE]
>> Jen Kramer: Jen never asked this question, unless it's a non-obvious answer, you guys should know this by now, okay? So why didn't this work? It worked with the h2, but it does not work with the card by itself, why?
>> Speaker 3: Cuz there are no containers that are not cards.

[00:07:59]
>> Jen Kramer: That's right. The card is the container, and so we cannot affect the card itself in our container query.
>> Speaker 6: Cuz the card comes first and the h2 is underneath, it's like inside.
>> Jen Kramer: The h2 is a child, so we can affect the children, but not the card itself.

[00:08:15]
Yup, I had the same moment. [LAUGH] That's why it's in the course, okay? So this is really important to remember. If we wanna apply styling then to card, what do I need to do?
>> Jen Kramer: How could I make card, a thing that I want to, the actual card itself and I do want to style the card, what would I need to do instead?

[00:08:39]
>> Speaker 6: What are their parents?
>> Jen Kramer: I'd have to look at a parent, so I'd have to say something like photo-card, right? And then I could say, .card, background-color:red.
>> Speaker 7: Photo card is.
>> Jen Kramer: Photo cards plural, if I spell it right, it'll work great. There we go. Yeah, all right?

[00:09:07]
So now I've got red cards. Boy, does that look bad, okay.
>> Speaker 3: Too many sideline.
>> Jen Kramer: Yeah, but photo-cards contains many cards and of course photocards will eventually be as wide as our screen, so it's actually not the container that we want. All right, so I'm gonna go back then to my card as my unit here.

[00:09:34]
But what I'm going to do is I'm going to change my HTML to the following, and here is why, okay?
>> Jen Kramer: Around each of my articles, I am now gonna put a div with a class of card, okay? Then I'm gonna have my article and it will not have a class of card, okay.

[00:10:01]
And then after my article will be a /div. Does that sort of make sense?
>> Jen Kramer: So I have an extra div around my card. That is my container that I can then query. Now I can style the article as effectively my card? Does that make sense? Okay, so let's put in a whole bunch of divs then and set this up.

[00:10:32]
So every article will have a div with a class of card. The article itself is not gonna have the class of card, and then we'll end our /div after the article, and we'll just do that a few times here.
>> Jen Kramer: Okay, so when you're done,
>> Jen Kramer: You should have the div with a class of photo cards, then you're gonna have a div with a class of card and an article inside of that without a class of card.

[00:12:06]
So your HTML should be structured very similar to mine by the time you're done making that modification. Okay, so now when we go back and we revisit my css, I have my card becomes my container. I've given it the name of card and I've given it an inline size.

[00:12:26]
I'm gonna have my container query for card with a minimum width of 200 pixels. Then inside of this, we no longer ask for card to be background color of red. We would say article would have that background Ground color of red if that's what we wanted to do, okay?

[00:12:47]
So now we can make changes to the card itself now that we actually have an extra HTML element to make this work. Everybody clear as to why this little modification works? Okay, fantastic. Then let's write some real code. For each one of my cards, which are now articles, what I'm going to do is the following.

[00:13:07]
I'm gonna give it some padding, let's say 1rem. I'll give it a display: grid. And I'll give it a gap of 1rem. So we have a little bit of space in between all the elements there on my card.
>> Jen Kramer: Now things look a little bit big there on the page that's partially due to margins.

[00:13:29]
So I can say article,
>> Jen Kramer: And then all of its children of article will say margin: 0.
>> Jen Kramer: Okay, so that's a little bit better. So all of our cards look exactly the same. This is how we have to code this first.
>> Speaker 2: We're going to just code how our cards look at different dimensions.

[00:13:56]
And then finally, I'm going to say .text display: none.
>> Jen Kramer: Okay, so that is gonna give us the first card layout, which is this one right here. So we have the big image on the top, the headline and the button that is the cards that we just coded.

[00:14:20]
Those are the least why'd cards when there was cards that we have? Make sense? Cool, all right. And I've done all the math for you. I did all of the scrubbing and testing and figuring out how big these cards could be. So I derived all of that from our previous design.

[00:14:40]
So now we're going to make your window about 275 pixels wide or so. And we're gonna write our next container query. So that's our first container query. We'll write another one @container card (min-width: 250 px)
>> Jen Kramer: So just kind of like a media query except it also has a name with it.

[00:15:07]
And it's container instead of media. So now what I'm going to do is I'm going to say my article will have a grid-template-columns of 2fr 1fr
>> Jen Kramer: Remember that layout? Yep, okay?
>> Jen Kramer: And we wanna make sure our image, article image is going to be on the other side, so grid-column 2/3 and grid-row 1/2.

[00:15:51]
So that'll put our image over on the right and our text over on the left. And then we have some wrapping buttons, so I'm going to set Say .link, grid-column 1/3. There's our second round of cards, basically. So we have this layout here. We've completed this layout here.

[00:16:18]
We coded that. Any questions on that one?
>> Speaker 2: Does it matter that the picture's on the right?
>> Jen Kramer: That's what we wanted, the picture on the right. Yep, no worries.
>> Jen Kramer: Everybody okay? Cool, let's do the next one. So the next one @container card and this one is gonna be,
>> Jen Kramer: We're super creative, min-width will be 200 and, sorry when with will be 500 pixels.

[00:16:59]
So this pretty much holds until we get to 500 pixels. So make sure your window is bigger than 500 pixels. Min width, 500 pixels.
>> Jen Kramer: And so here we're going to say we have to make our text display again. So text will be display block.
>> Jen Kramer: And we want it to appear in grid column 1/2.

[00:17:41]
>> Jen Kramer: Okay? In our image, we want to stretch over all of our rows. So article image is gonna stretch from grid row, 1/4, so it's gonna stretch over all of those. And that looks much better, yeah. So you can see the progress that we're making here, what we're doing is we're literally coding just the cards.

[00:18:06]
So there they are. Skinny card, slightly wider card, even wider card, okay? And I think we have one more card to do and this one happens at 550 pixels. So @container
>> Jen Kramer: Card, and this will be a min width of 550 pixels.
>> Jen Kramer: Okay, so here, I can refer to our pictures.

[00:18:42]
We've coded this one that was our skinning card. We coded this one. We coded this one. This one. No, I'm sorry. We coded these three over here. We haven't coded this one. So it's very strange then once we get to the widest setting, that we're actually coding this design again, but this is the way it worked out in our original layout, okay?

[00:19:15]
And I'll remind you of that. If we take a look at our demo again, remember, here it is. There's that big huge one here. This is taking up at least 550 pixels of space, okay? So that is why we need to code one like this at the large size that kind of blew my mind to it was like really we're going back to that design.

[00:19:36]
Yes we are because that is what the design requires. So here we're going to say our article has got our grid template columns of 1fr. There it is. Then our article img, article h2, article.text, and article.link,
>> Jen Kramer: Will be grid-column auto and grid-row auto. I'm keeping these as grid, we could definitely have gone back to block layouts, but remember, we originally had some subgrid going on here, and I wanted to leave these in grid format so that maybe they would line up with subgrid.

[00:20:36]
Make sense? That's why I didn't put it back to block.
>> Jen Kramer: Okay, how's everybody doing so far? Straightforward enough? So here are the things that we should take note of here. We have a series of break points. They are way smaller than what we had for media queries.

[00:21:00]
That should make sense, right? Because these are based on a container inside of your layout. Your layout is gonna be way bigger, right? Okay, and we've coded all of the possible permutations of how our cards might look. All one right on top of the other there, they all are.

[00:21:19]
They get taxed and then they get big again. All right, so this is where we start working with container queries. Here's all the possibilities that we might possibly have. Now the next thing that we're going to do is we're gonna start thinking about some exceptions to this rule and then we can lay out the whole page.