Card Page Layout

[00:00:00]
>> We are onto, part C. So in part C, now we're gonna lay those cards out on the page. So basically what we've done so far, we did our card layouts, all four of them. We made our exception, which is our featured card layout. Now we need to lay out those cards somehow on the page.

[00:00:20]
And what does that mean? Does that mean more container queries or does it mean media queries? How many say more container queries? How many say media queries? The answer is media queries because now we're laying out the cards on the page, okay? So our containers are going to control the look of the cards, depending on their width.

[00:00:43]
And then the media query is now something completely different. Depending on the size of the window, where are these cards located in space? And then the size of their hole, so to speak, on that page will determine how the card is displaying. It's a completely backwards way of thinking about layout.

[00:01:00]
If you are accustomed to thinking about media queries. Make sense? All right, so let's get this programmed. Okay, so here we are. We have now all the things. We have our cards and their various containers. We have featured, and we have all of their featured, the single featured container queries.

[00:01:29]
And so now we can write some media queries. Okay, so @media, after all those containers. We'll say @media, min-width 200 pixels. So it at least 200 pixels, remember, our container queries don't go smaller than either. We're gonna say .card, .text, display block. And I'll explain why we're doing this in a moment, but it is a little modification that we have to make to these cards as we start to lay out the page.

[00:02:10]
To this, we will also add the article and the padding for the article is gonna be 3rem, 1rem. So it's gonna give us a little bit of padding for these cards here on the page. This is for at least 200 pixels. Back here, okay. And I'm also gonna add in a line.

[00:02:36]
So, for .card, let's put a border-top, 1 pixel solid ccc. So that is going to create, here's our featured card, right? And then after those, we have a little bit of space in between our cards with the line in between, yeah? That is, if we look at our demo from before and we make our screen really narrow, that is what we had here in our demo before.

[00:03:06]
We did. We totally did. At really small screen sizes. Okay. Then, we're gonna go to a larger size, @media, oops. Here we go. @media with a min-width of 500 pixels. In this one, we're gonna say for our photo cards, We're gonna say display grid, grid-template columns, 1fr 1fr and grid template rows auto 1fr auto.

[00:04:10]
So if we get to at least 500 pixels Then we wind up with two columns of cards. Here's our featured card and here's all of the other cards and they're forming two columns. It looks like what we had before, except our featured card needs to stretch across two columns, right?

[00:04:33]
And we had done some things with subgrid, I'm gonna put them in here even though, It may throw us off just a little bit. Grid-row: span 3, grid: template-columns: 2fr, 1fr, and grid-template-rows: subgrid. And then finally, our featured item, Grid-column: 1/3. Okay, so now we have our moon across the top.

[00:05:19]
We have our little articles here underneath just like this, okay? And they are not lining up. Notice that. So when we get to our bigger sizes here, so we're missing our borders here at the moment. But it does look very, very, similar, yeah? Okay, cool.
>> And can you dash after on line 82 template rows?

[00:05:55]
>> Thank you, yep. You are absolutely right, cool. And then let's add our border. So for card whoops card:nth-child (2), card:nth-child(4). Then we're gonna say border-right: 1px solid #ccc;. Okay, so now we have our borders. Okay, so this was one of the things that I noticed here. Although we have subgroups setup, sub grid is not working, okay?

[00:06:43]
And sub grid is set up correctly here and I played around with this a lot and I googled the heck out of it. And I could not find anybody who has made sub grid and container queries work together at this point in time. So I've been thinking about why subgrid and container queries don't work together.

[00:07:03]
I'm thinking that container queries are independent of what's going on with the media queries and so subgrid is not talking to the media queries. The container queries are not talking into the media queries and we can't get things to line up for that reason. I could be completely wrong container queries like I said, brand new and subgrid brand new.

[00:07:25]
It could be that I just I haven't messed with this enough. Many people smarter than me have not written the right blog posts yet about how to make this work. But I was unable to make this work here at this particular point in time. Maybe when are you guys are gonna figure this out, okay?

[00:07:41]
So the fact that the Subgrid isn't talking with the container queries, let's just sort of file that away as a thing that maybe we need to dig more into. And we'll just sort of move on from there. Okay so then at this point, now we can just kind of change our media queries to continue to change our cards here.

[00:08:04]
And so now, so there's our 500 pixels media query. So when I get to add media (min-width; 750 pixels) then we can say our photo cards, Grid template columns, repeat (4, 1fr) right? So make sure we're at screen size where we can see what we're doing. And then our grid-template-rows: repeat (3, auto); and border-top, 1 px Solid #ccc.

[00:09:02]
Our featured card is gonna be different, so featured is going to take up grid-column 1/4; grid-row 1/3; border-right 1px solid #ccc, okay? So we're progressing there. .card:nth-child(4), Card:nth child(5). Grid-column: span 2. And then finally, card;nth-child 2.text, card:nth-child(3).text displa:none. Okay, so once we've done all of that, then we wind up with, well, that didn't quite work out right.

[00:10:30]
I'm sure I missed something somewhere. Let me switch over to the answer here. Cuz I'm just typing in things in at this point. So, okay, so here we go. So we have our series of card containers. We have our series of featured container. As there's one, we have a series of media queries.

[00:10:52]
These media queries are gonna control the look of the web page, okay? And if you compare the way this page looks now with the way we encoded earlier with media queries, it's basically the same except the subgrid part is not working, okay? Which is better?
>> Media queries.

[00:11:16]
>> You like media queries better?
>> Subgrid works.
>> Cuz the subgrid is working. Yeah, anybody else have an opinion?
>> I think I'm with James, I like media queries.
>> You like media queries? Okay, do some of you see the value of container queries?
>> Yeah.
>> Yeah.

[00:11:32]
Maybe this isn't the best example for it, but yeah, container queries could potentially be useful. That's a completely different way of thinking about how the page is put together, right?
>> Yeah.
>> Seems like you can scale it more, like you don't have to say the number of rows or columns that you have if you're just talking about the cards.

[00:11:50]
>> Exactly. And the whole point of this container query thing is that this holy grail of, I wanna distribute this thing. And you can just download this thing and you can put this thing into your code base, and it will appear on the page and it will function exactly the way that I've coded it at all dimensions.

[00:12:09]
So now with a container query, I can control exactly how my particular item is supposed to look at all different dimensions, and I can ship that along with whatever else I've got going on with that JavaScript and whatever else you've got going on, right? So that's what a lot of people are thinking about with these container queries.