Grid Layout Exercise

[00:00:00]
>> So, we are moving on to Chapter 3, and in Chapter 3, you are going to put together a grid layout. I want you to make a little Mars collage. So, here we are with all of the pictures from Mars, all right? And good, you're gonna set the width of the collage to 980 pixels, we're not gonna make this responsive yet, we're just gonna make it fixed width.

[00:00:24]
And as it says here, center the collage if there's room, so center the whole thing on the page if there's room. And if there's not, that's fine, don't reorder the images from the order that I give you in the HTML. You may need to make some changes to the HTML to make it work, like adding classes and such, or adding other elements, but you do not need to reorder the images themselves in order to make this happen, okay?

[00:00:56]
All right everybody, how did you do with that particular challenge? Hopefully it worked out for you, okay? Hopefully you've got a screen that looks kind of like this, you've got the Martian landscape here on the top, we've got some close-up of some rocks over here with the planet, and then down on the bottom, we have one of those giant craters there on the Martian surface.

[00:01:16]
So the way that I have set up my HTML here is I put a div around all of these images. Remember, you've got to have parents and children in order for grid to work. So that's the first thing that you have to add, I've added my grid container that goes all the way around all of those images.

[00:01:36]
The second thing that I did was I gave all of my images a class just for fun. You could definitely use nth child in order to select all these images if you wanted. But just to keep things a little simpler, I gave these classes of the exciting names 1, 2, 3, 4, and 5, as one does.

[00:01:53]
Then in my CSS, I have here a grid container where I displayed grid, and I set up uneven columns. I have a 2FR and a 1FR, cuz Mars is bigger than the other two little images that are over there. If you had different numbers, you said 3FR, 1FR, totally cool, cuz I didn't tell you what the proportion should be.

[00:02:17]
I set a width on that container to 980, that gives us a fixed width here, and then if you centered it, you could center that just using margin zero auto. What do those two numbers mean again for margin when it has two numbers like this? What does the first number mean?

[00:02:35]
>> Top-
>> Top and bottom, what does the second number mean?
>> Left and right.
>> [LAUGH]
>> Okay, and what is auto mean when it comes to margin?
>> Center?
>> Yes, to center it. So basically to take any extra space, whatever extra space there is divided in half and stick it on the left in the right, that's what auto does.

[00:02:57]
Okay, and effectively it centers it in space. Then we just have a whole series once you've actually set up your grid, a whole series of numbers here talking about what images are spanning which columns and which rows here in space for 1, 2, 3, 4, and 5.