Two Column Card Layout

[00:00:00]
>> So by default with min width media queries, in other words, where the mobile styles are outside of the media queries. When we make the screen bigger, those mobile styles are gonna continue on forever after, so we can make the screen as large as we want. We have no media queries in place, and this is going to look exactly the same.

[00:00:20]
The same layout for all of the other sizes of devices that you might be using here. And while that looks very cool, it is not what our specification called for. So what we wanna do now, now that we've got this working for smaller mobile sizes, we are going to add a media query at 500 pixels.

[00:00:40]
So what you should do now is move your display window here, look at the number down on the bottom in the little pill, and make sure that you are over 500 pixels wide, so that you see the changes that are being made. If you leave your design window small, your changes will continue to take effect, but you will not see them, because, of course, they apply to larger size windows.

[00:01:03]
So we wanna make sure that we have the right size window in place.
>> Said to 500?
>> Over 500, okay. So now what we'll do is we'll put in our first media query. So how is this going to go? Anybody wanna give me the code for this?

[00:01:21]
A min width media query for 500 pixels?
>> @media?
>> @media, yep? [INAUDIBLE]
>> Yeah, in parentheses, min-width, yeah?
>> 500px.
>> 500px, exactly. So anything that comes inside this media query will apply over 500 pixels. We can override what came before. We can also add new styles to this.

[00:01:50]
So what I'm going to do now then is, my next design, I have my featured card up here on the top, it now has a border around it. In fact, all of the cards have borders all the way around them, right? And I have two cards sitting side by side, and all of the information in those cards is stacked on top of each other, right?

[00:02:17]
Okay, I always find it helpful to actually say all of that out loud. I mean, it looks really obvious, but it helps you think through the problem. So what we need to do then is, we need to recode our card to go from the headline and the button with the image next to it to have everything stacked.

[00:02:34]
So that's one change we need to make. And we need to somehow figure out, whereas these cards were all just stacked on top of each other one after the other, what I need to do now is have two columns for those cards and have the featured card span across those two columns.

[00:02:52]
Makes sense? So that's our plan. Let's see what we can do about that. If we take a look at our HTML, always a great place to start, how would I make two columns out of all of these cards? Can I do it with the HTML that I have?

[00:03:10]
You're saying no, James, why are you saying no?
>> Because there's no way to select all of them.
>> Exactly, so there's no parent to all these cards. We wanna lay out the cards on the page, they need a parent. And right now they are just unruly children, yes?

[00:03:26]
Okay, so let us add to this then a parent. I'm just gonna use div again. And I'm gonna call this class of card-container, because that's what it's doing. And we can put a /div after all of the cards, and I like to indent them, okay? Will that div impact our mobile design?

[00:03:55]
The one that I just added, is that gonna impact my mobile design? Why do you say no, Tapper?
>> Because we don't do anything with that class
>> Exactly, we make no reference to it in the mobile design. So we can just add this now and it's not going to break anything.

[00:04:11]
Okay, great. So now let's concentrate on the layout of our cards. We wanna try to get them into two columns and we wanna have the featured card span across the top. How would I do that now? What is my style that I would put here? What is the selector?

[00:04:32]
>> card-container.
>> card-container, exactly. So from my card-container, what am I going to say next?
>> grid-template-columns.
>> How about display: grid? [LAUGH] You're absolutely right, but first we need to display grid, okay? Then grid-template-columns. What comes next?
>> grid-template-rows, no.
>> Template columns, no rows yet.
>> I see.

[00:05:10]
>> 1fr 1fr.
>> 1fr 1fr. Or you could say repeat, parenthesis 2, 1fr, either way, gives you the same thing. Okay, that's a mess, but can you kinda see that we've got what we're looking for? We have the two cards next to each other. Everybody see that, even though it's messy?

[00:05:31]
Okay, now I need to give this a little bit of a gap. So I'm gonna say 1rem for a gap, that'll make it a little less messy, but not by much. Okay, so next, I need to have that featured card, the first one, I need that to span across both columns.

[00:05:54]
So what is the next style I need to put here inside of my media query?
>> .feature.
>> Yeah, .feature. And what am I going to say next?
>> grid-columns: 1/3.
>> 1/3, exactly. Hey, look at that. Are we done? Actually pretty well, we're pretty well done. That is all we really need to have here for the layout purposes, okay?

[00:06:34]
So it spans across the two columns. There we go. There's all the cards lined up underneath. All right, so to finish up this feature design here, we'll add to this a border of 1 pixel solid ccc. So that'll put a lovely little border around the whole thing. We can give this a little bit of padding, 1 rem, because it looks kinda ugly when the border goes right on the edges of the card.

[00:07:03]
And then a border-radius of 5 pixels. And that'll give us a tiny, little bit of rounding of those corners. Fashion tip for those of you who are fashion challenged like me. Make sure all your border radii match. So if we're gonna call it 5 pixels for your border radius here, make sure it's 5 pixels on your button, make sure it's 5 pixels on your image.

[00:07:30]
If you have all different border radii, or some have pointy corners and some have rounded corners, then designers get upset. So make them all match, okay? So now I need to bring back my paragraph of text. If I take a look at my comp again here, my text, lorem ipsum, should be displaying here on this page.

[00:07:51]
So we need to bring that back. If we go back in our mobile styles, that was controlled by this funky looking style right here. So I'm just gonna copy that same style and paste it into my media query. You want it to match in terms of the selector, because different selectors have different specificities.

[00:08:16]
So you wanna use the same type of selector here inside of your media query. So we'll override what came before, and this time instead of display: none, we'll say display: block, which will bring our paragraph back. At this point in time, we have a choice, we actually haven't formatted our cards underneath.

[00:08:35]
And we know that with the rest of our design, there aren't two columns in those cards. So that difference with the two columns on that featured, that's gonna go away actually as we get to our later cards. So what I'm going to do now is I'm going to just ignore what's here.

[00:08:53]
I know it looks wrong, you're totally right, it looks wrong. But I'm going to ignore it for the moment in favor of styling up my other cards, and then I'm gonna revisit featured to get it looking the way it should, okay? That's my plan. All right, so for the rest of my cards here, then what I wanna do is I wanna stack the headline, the image, and the button.

[00:09:20]
What would be an easy way to make this happen?
>> display: grid and then have just one column.
>> You could do that. Yep, you could say .card, and then you could say display: grid. You could say grid-template-columns: 1fr. And then you have to turn off the settings for the headline and the button because, remember, the image is spanned.

[00:09:48]
I'm sorry, you have to turn off the settings for the image because, remember, the image is spanning over two rows, right?
>> display: block? If we do display: block, then we save ourselves a little bit of work. So if we got a block, then they just stack, how cool is that?

[00:10:08]
[LAUGH] Okay, so the only thing that we need to do now for these cards then is add a border, 1 pixel solid ccc, cuz we want them to match with all the other cards. We wanna give them the same padding, padding 1rem. We wanna give them a border radius, 5 pixels, to match all the other cards.

[00:10:44]
Why didn't my padding pad? Cuz I forgot my colon. [LAUGH] There we go. There we go. Hey, look at those cards, don't they look great? Okay, we may wanna put a little bit of space here in between the button and the image, sort of depending. But it's worth noting over here, do you guys see Pluto and Charon?

[00:11:13]
See, it has no border on it? Why does it have no border on it when all the other cards do? So unfair, the youngest child always gets the-
>> Because you're still on that code with the last child.
>> Yeah, we did. Up here with the last child, we said border: none.

[00:11:30]
It's still doing that exact same thing, isn't it? Gosh, I hate it when that happens. It's doing exactly what I told it to do. So we're gonna change this to 1px solid #ccc. And the border will come back for Pluto also. Poor Pluto, man. Okay, so let's give a little bit of space between the image and that button.

[00:11:58]
So we can say .card img, margin-bottom: 1rem. And once again, notice that things are not lining up perfectly, okay? We have Jupiter and Galilean moons takes up two lines, Saturn and its moons takes up one line. The buttons don't align down here on the bottom. This is all just fine for the moment, okay?

[00:12:22]
I see it, I see the problem, but we cannot fix it with the tools that we have at the moment. This is a job for subgrid, and we're gonna talk about that in chapter nine, okay? Let's revisit our featured card. Hey, look at that, it's kinda fixed itself, didn't it?

[00:12:41]
Well, we got rid of the columns on our card and fixed our featured card, so that is looking good too. Let's compare our comp, make sure everything's looking all right. Pretty much got what the designer had planned here. We were pretty close.