Background & Overflow: Desktop Layout

[00:00:00]
>> Okay, so let me show you the last one here. And the last one is for over 1,000 pixels. @media (mid-width: 1000px). Okay, and, So that is this one here. So now we wanna make it go like this. Anyone wanna comment on that, the difference between these two layouts?

[00:00:40]
>> We have just maybe one row to the wrapper-
>> Yeah.
>> Of the most horizontal one. It looks like I'd say there's one row to the wrapper, and then the secondary, right, half of it is separated into two rows itself.
>> Yeah.
>> Then yeah, we have our card layouts, which don't need too much change otherwise.

[00:01:02]
>> Yeah.
>> It's like the first one's two fractal units, all right, yeah.
>> Yeah, something like that. Yeah, so maybe this is 2fr here, 1fr, 1fr, and we have two rows. And this card here spans two columns and two rows, right? Yeah, something like that. Good, this is great, okay?

[00:01:25]
So let's see how we wrote that. So what it did here was .wrapper, grid-template-columns of 2fr 1fr 1fr. Grid-template-rows of repeat(2, auto). Oops, and a gap of 2rem, All right? And then we need to resize our card columns. So .card, grid-template-columns of 50px 1fr. And then one is always an exception.

[00:02:22]
So for one, grid-row: 1/3, grid-column: 1/2. Here we go. And then we just have to fix there within our own layout. So here, grid-template-columns will be 50px 0.75fr 1fr. And grid-template-rows will be 0.25fr 1fr. And that will push down our text a little bit there. It's a lot, right, it's a lot.

[00:03:11]
But it's amazing what you can do here and it's amazing how much you guys are getting out of this even if you've just started learning grid today. You've now been coding grid for three hours, nice. These are problems that are really designed for people who have been coding grid for three years, [LAUGH] okay?

[00:03:31]
But you're catching on to it, you're able to look at this, you're able to group things into units that we're gonna move around on the page. You're able to figure out exactly how you might do that even if you don't know all of the syntax. And the first one there, understanding how things are moving on the page, is far more valuable than the actual syntax, which you can go and look up, yeah.

[00:03:53]
But understanding the plan and how you're going to move and what where, that is the hard part. And you guys seem to be getting that. So well done, everybody. Yay, questions on our coffee facts?
>> I have a bunch of questions on Grid. I feel like we should all check out the course on Grid.

[00:04:18]
>> Don't you?
>> [LAUGH]
>> Wow, yes, that seems like a good thing to do.