Overlapping Items with CSS Grid

[00:00:00]
>> All right, so we have one more section here, so that's part three. So we've got them lined up next to each other. So the last part here is getting these cells to overlap. So let's go through that now, and then I'm gonna have you try it to add the additional projects.

[00:00:20]
Okay, so now we are gonna use Grid to get these projects to overlap. So, as you see here in our diagram, as you know, right now we have two columns that are next to each other, somehow, we need to get these two things to overlap in space. So that we get that very cool effect.

[00:00:35]
So the question is, how much overlap do you want? And as you can see from our diagram, we want a little bit of overlap. We don't want an excessive amount because then we'll cover up the picture entirely. We don't want to do that. But we want enough that we go, wow, you got an overlap going on there, how cool is that?

[00:00:56]
All right, so let's go back to revisit what we did here with our grid template columns. So right now we have this split into just two columns on this page. One column, we have the image, one column, we have our text. But we can have as many columns as we want.

[00:01:10]
If we wanted to have 100 columns on this page, we could do that. It's actually really easy to do with grid, the syntax you can do one of two ways. You can either say 1FR times 100 [LAUGH] just let it keep on going forever. Or, you can use the shorthand syntax which says simply repeat something like 100, 1FR.

[00:01:35]
So now I have 100 columns. There we go, and my image and my text are assigned to the first two columns. That's what you're seeing there [LAUGH] not quite what we really had in mind. So I'm actually gonna reduce that again, just to ten. Let's just work with ten columns.

[00:01:56]
Now by default, what grid will do, is it tries very hard to think for you. It's a thinking about well, you've got ten columns, and you have two children. So I'm gonna put the first child in the first column and I'll put the second child in the second column and then I guess you have eight empty columns.

[00:02:16]
[APPLAUSE] Have a nice day says CSS grid. Well, that's not exactly what we had in mind. What we'd really like to have happen is, sort of a 40 60 split. We'd like to have the image take up about four of those columns, and we'd like to have the text take up about six of those columns.

[00:02:33]
Actually, well, a little bit more right seven, seven columns, eight columns, so that it overlaps that image. And so how are we going to go about doing that and telling grid what to do? Well, that comes into some additional syntax here. So we've told the Article to do this, so now what we'll do is we'll say for the project's image.

[00:02:59]
Now we have to tell it what columns to display in, so let me give you the syntax and then I'll explain it to you. So I'm going to say grid column, so grid column1/6, what does that mean? If you imagine a series of boxes on the page, okay, so here we are on the page.

[00:03:19]
This is line number one outside of everything the very far left side of the screen that's line number one. Line number two is happening, let's see, this is the image. So line number two is happening in the image, line three is happening in the image, line four is happening in the image, line five is happening in the image.

[00:03:36]
Line six is happening right here between the image and the text. So we're sort of counting over, so we count like humans, we don't start with zero, we start with one, and we're starting over here on the far left side of the screen. So we go 1, 2, 3, 4, 5, 6 and then that's where those numbers come from.

[00:03:57]
Let's do the same thing then with our text, and for the text, we'll say our grid column is 5/11. So since we're going 5, 6, 7, 8, 9,10,11, right? We're overlapping that center column there. So the image is gonna stretch into that one column and now we have the text stretching into that column.

[00:04:20]
But grid again, trying to be helpful but not. Puts these now on two separate rows because you actually do have an overlap here in the middle. And by default grid says, you made a mistake, well, let me help you with that I'll just put all of that stuff into another row.

[00:04:40]
That's what's happening here, so we have our image we have our text down here in the second row. So now we need to tell them no, I want both of those things in the same row. So the way we do that grid-row: 1/2, right? We're gonna start at the top of the screen, that's line number one.

[00:05:02]
Line number two was the one after that row, so one to two And we're gonna say that again for the text, grid-row: 1/2. You did it, look at that they overlap, you've put them all into the same row, you've given it some number of columns. That was me playing around with however many columns might work here, you might find this works just fine with 12 columns or maybe you can get away with only using 3 columns or whatever.

[00:05:35]
But we managed to get everything to overlap here, just like that. How cool is that? You didn't believe you could do this at the start of the course but here you are, you made it happen. And so now as we narrow up the screen here, this is looking pretty good, until we get to our break point and then things stack on top of each other, okay?

[00:06:00]
Before that, there they are next to each other and looking all right. How amazing is that?