Grid: Desktop Layout

[00:00:00]
>> All right, so let me swap these back again. Put my image wrapper before number five here, so that I get the effect that I want. Okay, you ready for the crazy one, then? My goodness. Okay, so let's talk about this crazy one here. [COUGH] And to do this one, if you go into your CodePen collection, probably this is the easiest way to do this.

[00:00:29]
Go into your CodePen collection, and then let's click on 3D Begin, Wacky Grid-larger breakpoints. And let's look at that here for a moment. So, this one has the additional HTML in here that you won't have otherwise on the CodePen that you're working in. So, I have here a configuration grid with configuration cells with all the numbers in them, okay?

[00:00:57]
There it is, one to 24. And then, I have the markup that you've been working with so far. Inside of our CSS, so if you start from this one here, what we have going on is as follows. We have that bit of HTML at the top of the screen, which you won't have if you're not using this specific pen.

[00:01:21]
And you see that we have all of our little boxes that make this up. So what I would recommend that you do is as you look at the design here, and you look at these images, figure out how wide each image is in terms of its column. So let's look at this coffee cup here.

[00:01:42]
This first one, you can see that it's going to go between what? What are our numbers?
>> 1 to 3.
>> 1 to 3. 1 to 2. 2 to 3.
>> And 4.
>> 3 to 4, right? So 1 slash 4. So if you can figure out the widths of all these images, and the H1 here in the middle, that's a great place to start.

[00:02:07]
If you can kinda guess at the rows here, and see if you can figure out how many rows we actually have going on, that is not as easy. If you have the capacity to take this image and draw on it, that'll help you figure out how many rows we have here.

[00:02:22]
And then you can start figuring out exactly where every image and the H1 should be placed here on the page. Makes sense? Even before you write your code to figure out what the plan is, the configuration grid is really helpful. All right, so the trick to getting this layout to work is, first of all, you need to make sure that your actual wrapper here with the images inside of it matches your configuration grid here on the top.

[00:03:00]
So, as I said here in the comment, what styles do you need to carry to this media query to ensure the same alignment of those two? So, if we take a look at the configuration grid here, it has a display grid, it has 12 columns. It has certain padding, it has a gap, it has a max-width, it has a margin, and it has a border.

[00:03:23]
We probably need all of that, don't we? We're gonna need all of that. So if we copy that, and we put it down here and change it from a class of config grid to a class of wrapper, that's going to take care of most of this. And don't panic.

[00:03:43]
[LAUGH] It's doing exactly what you told it to do. It's lining up these with our first couple of columns, right? Our tablet layout only had two columns in it. So it's crammed all of our content into the two columns here. Never panic. Always look for a reason, okay?

[00:04:02]
So that's just fine. And then, what we're going to wanna do is use my favorite trick again, .wrapper > *. So the direct children of the wrapper, let's put on a border: 2 px solid var{vanilla}. That really shows us where the edges of things are. Because this h1 is a little bit big, it's actually hanging outside of its wrapper right now.

[00:04:35]
Because, of course, the words are longer than the width of its wrapper. But we've got the rest of these, they're doing okay. Okay, so one of the first problems that we're going to have here is these images still have that width of 100%, height of 100%, and the object fit in place.

[00:04:58]
[COUGH] To cram them into that particular little bit of space. And what we're gonna want when we go to our finished version of this, we want those images to be the widths that they are in those particular places, not cut to a specific size. We just want them to occupy the rows and columns that are there.

[00:05:20]
Okay, so in order to do that, what we'll need to do is go to our .img-wrapper. And we're going to set our width: auto, our height: auto, and object-fit: contain. So as you can see by doing that, we are basically turning off what we had before. Make sense?

[00:05:48]
We're turning off the concept of these things occupying all the same space. Now, that is the entire coffee cup image crammed into one row and one column. [LAUGH] Not what we want, but we continue to get closer, right? Okay, here's our croissant spanning two columns, probably one row again here.

[00:06:11]
This is in one row, we didn't mess with our rows in our previous design. So this is giving us some hints about where the rows are here exactly inside of our grid. Make sense? Okay, so all that's left now is counting. Really, that's all we've got left to do.

[00:06:28]
We have .one, right? And it has a grid-column and a grid-row. Then, we can just copy that and say we have. We have .two, .three, .four, and .five. So it's pretty much it. All we have to do now is specify where exactly we want those images to go in space.

[00:07:09]
It's not so terrible, is it?
>> Also the h1.
>> Yeah, and the h1 right, and our h1.
>> Don't we also still need to figure out how many rows there are?
>> Yeah, we can count up all those rows. What did you guys come up with? Four rows.

[00:07:32]
>> I thought it was maybe 16, but I feel wrong about that.
>> You thought maybe 16, but you feel wrong about that. Okay, anybody else have a guess? Okay, well, remember the rows are gonna vary in their heights. So we have probably one row here with the coffee cup.

[00:07:52]
We have a second row here, right?
>> They vary in height, so it's just each individual distinction-
>> Pretty much.
>> Third is that gap.
>> Yeah, that gap lines up with the top of our each one. So that winds up being our third row here.
>> Okay.

[00:08:09]
>> Yeah.
>> The gap on the right is four.
>> Yeah, something going on here.
>> And then-
>> And then, we might have a long way to go.
>> Well-
>> Before we get here to five.
>> The make time for coffee, doesn't that end? And that requires a six?

[00:08:23]
>> Yeah, it is may be multiple rows, or it might be one row, right? So this is probably spanning from 1, 2, 3 rows here. This might be a fourth row, and then this image down here by itself is a row by itself. Okay? So it is total craziness.

[00:08:50]
It is total craziness, and that's okay. This is again one of those things in CSS where you can continue to massage the numbers until you get something close, right? But the widths should be easier to guess at what these are. All right, so I'll give you,
>> I'm sorry, this is super important, can you explain that again?

[00:09:09]
I was convinced each change there, essentially, each vertical change requires another row. So I counted up to eight then, but it sounds like you're saying it's five.
>> Let me look at my numbers. The biggest number I have is eight. Yes, so I think you've got it right.

[00:09:27]
Yeah, so I think we've got eight rows. Okay, so let's put in some numbers, then, we'll start with one. So did anybody figure out, or should I just give you numbers? Okay, fine.
>> [LAUGH]
>> You're tired, I'll just give you numbers, 3/7. And 7/8 will be image number one.

[00:09:54]
And so there it is, there's the macchiato down here at the bottom. Image number two is 1/4, 1/4. Okay, and that is our coffee cup. And again, don't panic, it's all going to get clear. [LAUGH] [INAUDIBLE]
>> For two, I had 1/4, 1/4. Let me put in all my numbers first.

[00:10:26]
>> No, don't listen to me. You're right, carry on.
>> Okay, let's see what happens. Sometimes these things depend on each other. So we just sort of put in some numbers, 10/13, 2/5. And 9/12, 5/7, and then back for our h1. Okay, 5/9, and 1/7. Now this one, I did a little bit more tweaking on it, okay?

[00:11:08]
So notice how when I put the last one in place everything snapped into place? Everything is kinda dependent on each other here in this grid. So a couple of other things with this h1. Notice the big chunk of space that I have here at the bottom, what is that?

[00:11:23]
Where is that coming from? Probably not a row, so what is it?
>> Probably buttom padding?
>> We had some margin on those. We had some margin on those, so, well, or we had padding on them, right? So I have padding of 0, and I have margin of 0 auto, to try to align it here inside of the cell.

[00:11:50]
And I also did a max-width of 400 px. And I also did a font-size: var{--lg}. And not all these styles apply to exactly the screen dimension because, remember, as we make the screen bigger, we wanted this thing to do so other things here in space? And align itself, align-self: center.

[00:12:25]
So that will make it large, there we go. Okay, so now as I make this bigger, see how that stays right there in the center? That's the align-self property there from grid working. And that is, [LAUGH] that was the configuration grid disappearing, going back to tablet.