Overlapping Grid Layout

[00:00:00]
>> All right, so everybody ready to make an art? Let's make an art.
>> [LAUGH]
>> And so we can use grid to make lovely art things. This is what we're going to make. We're gonna take five of those fantastic NASA images, and we're going to do this very cool thing to all of them.

[00:00:18]
So does anyone wanna take a stab at how we might put such a thing together? Just sort of generally speaking, can you look at that? I can tell you it's done with grid. Can you make some guesses about what might happen?
>> Is there a way to rotate something?

[00:00:36]
>> There is a way to rotate something, not necessarily with grid. It would be with transform, but yes, we can rotate something. We have five images, right?
>> Four columns and four rows.
>> Hey, yeah, four columns and four rows, right?
>> Cool.
>> Four columns and four rows, that would put the middle image overlapping some of those columns and rows.

[00:01:00]
Can you kind of see that?
>> You said, there's four columns.
>> Yeah, so if you look here, okay, here's one, right, on the very edge. If we put a second column here in the middle, yeah, put a third column here, and a fourth column here, right? All right, so then each of these images spans two columns.

[00:01:27]
Then we're gonna put the Earth in the middle, spanning two columns but offset. That'll get us to a square, right, in the middle of all of the squares, likewise with the rows, right? Square in the middle of the squares and then we'll turn it, okay? So let's sort of broadly what we're gonna do.

[00:01:45]
You're ready to code it? All right, so let's start with our beginning code pen. And what we have here in our beginning code pen is always worth inspecting. So we have just a section on the outside just to hold things together. There's a div around each one of these images, all right?

[00:02:08]
And so there's all five of our images. The fifth image, the one that's gonna wind up in the middle eventually is earth. All of the other images are Jupiter, Pluto, Saturn and Triton, okay? So this is also gonna be, we're not gonna worry about responsive design with this one either.

[00:02:27]
We're gonna do that, cuz this isn't art. So we're gonna do it for our one-dimension only. All right, so let's take a look at this and set up our grid. So I'm gonna use my section element. There it is, that one on the outside, right? Because these divs with the images inside of it, they are all the children, okay?

[00:02:55]
So just so that you see that. And so what am I going to put in here for my section?
>> display: grid?
>> display: grid, you guys are catching on. display: grid, then what?
>> grid-template-columns?
>> grid-template-columns, and I actually have five columns. Let's see, grid, I have repeat(5, 1fr).

[00:03:28]
And that's because each of those four images spans two columns and two rows and the middle cell will take a chunk of the middle. And so having that fifth column and fifth row is gonna help us. So grid-template-rows, repeat(5, auto), okay? And then I'm gonna give this a gap and I used 1vw.

[00:04:00]
What is a vw besides the car from the 70s?
>> Viewport width?
>> Viewport width, right? Viewport width, 1100th, okay? So it gives us a nice, even dimension between all of those images. I'm using a viewport width, so that the stays constant throughout all of my image. I don't want anything scaling.

[00:04:22]
It's art, I want it to be the same everywhere. Okay, so then we need to assign these to their specific places. So I've just done this with section div:first-child. For those of you who are learning these child selectors, this is a great chance to go and learn all of these.

[00:04:44]
So here's our first child. It'll have a grid-column of what?
>> 1/3?
>> 1/3, right, grid-column: 1/3, and a grid-row: 1/3. Then we're gonna go to our section div:nth-child(2), the second one, the second image. We're gonna say grid-column of what? I'll give it to you.
>> 3/5?
>> 3/5, yep, 3/5, there it is, there's Pluto.

[00:05:28]
And a grid-row of, I'm gonna still call it out, 1/3. It's in the right spot, but I'm still gonna call it out. And then I'm gonna copy that one, and I'm gonna continue to paste it here. So section div:nth-child(3), Is going to have a grid-column of 1/3. And a grid row of 3/5.

[00:06:01]
So that'll put us down there in that lower quadrant. And then our nth-child(4), that is going to be 3/5 for the column and 3/5 for the row. So if you look at all those patterns there, we've got basically 1/3 or 3/5 and various kinds of orders in order to lay out our main grid here.

[00:06:31]
Okay, so to put Earth in the middle. Earth's hanging out there over on the edge. To put Earth on the middle, we're gonna say, section div:last-child. And the grid-column will be what?
>> 2/4?
>> 2/4, okay, so there it is in the middle. grid-row will be what, 2/4.

[00:07:02]
There it is, the Earth is in the middle, okay? So now, we don't really have a gap for this middle image here, so we're gonna fake it. We're gonna give it a border. And the border will be 1vw solid white, why 1vw?
>> Cuz it's the same as what we set the-

[00:07:27]
>> Match all the others, right? Cuz we want it to be pretty. Okay, now if you like that, you can keep it. That's still pretty cool looking, right? But we wanna turn it and make it a diamond and really make it sizzle. So to do that, does anyone have any idea how we would make a diamond out of the earth?

[00:07:46]
It's kind of profound. How would we do that? So this would be transform is the property and we can say rotate 45, oops, sorry, 45 degrees, there we go. So that fits it into place really nicely. Look at that, okay. But the Earth rotated, too. And Neil deGrasse Tyson is now really mad at us, cuz we know how he is.

[00:08:20]
So what are we going to do? Well, be aware of what we just rotated. What did we rotate? We rotated the div, right? We did not rotate the image. [SOUND] So what if we go to, section div:last-child img? And this time, we're gonna say transform: rotate(-45deg). Okay, so now Neil deGrasse Tyson isn't mad at us, but we have another problem here, what is that?

[00:09:01]
>> Order didn't come with us.
>> It's an art, so if you like it, you can keep it. But we probably need to make it a little bit bigger to cover up all those lines, right? So we're actually gonna also add to this scale, 1.42. So we scaled it up, we've covered up all the lines.

[00:09:23]
And so now what we wanna do is hide the overflow. Cuz that's what's going on here, right? We have some overflow of the image, and we can see it. So what we're going to do is on the div, then we're going to say overflow: hidden. And that tucks the corners of the image right away under everything else.