CSS Grid

[00:00:00]
>> I think so far this has been pretty straightforward. We have figures, we have images, we have figure captions. We've added styling to all of this. Now comes the moment when we need to put the figure caption on top of the figure, okay? So, so far everything should be pretty straightforward.

[00:00:16]
Now we're gonna put the figure caption on top of the figure. Anybody have any ideas about the approach that we could take to make this happen?
>> Changing like the Z index.
>> So Z index would be associated with the position property, right? So we could do absolute positioning and absolutely position our figure caption on top of our image.

[00:00:37]
That's definitely one way to do it. The other way that we can do it is we can do it with CSS Grid, who knew that you could do this with grid. It's one of my favorite tricks in the world. I love it overlapping grid cells. So we're gonna do this with grid.

[00:00:52]
So to our figure style that we have started up here at the, do we have to figure style? We don't have a figure style, we'll invent a figure style. I usually like to put that first. I'm going to say display grid. So that's gonna make each figure displaying in the style of grid.

[00:01:15]
And then I'm going to tell it grid-template-rows, I'm gonna have 1fr 100 pixels. Okay, so what does that mean? We're gonna work with the figure as a display of grid, just like you have seen before with parents and children. We have in our HTML, We have a figure here and each figure has two children.

[00:01:53]
In this case, one child is the link that the images inside of that link and one child is the figure caption, okay? By declaring the style of grid on the figure, we now have our image and our figure caption as children and then we can manipulate those in space to make these overlap each other.

[00:02:17]
And the way that we'll do that, Is with these two rows. And we have a row of, quote, 1fr, and a row of, quote, a 100 pixels. 100 pixels, that's pretty straightforward, you know what that is. What is 1fr? What is that mean? Is it French? It is not French.

[00:02:41]
It is fractions. Okay, one fraction. So one of the cool things we can do in grid is it will automatically do math for us. The fr is a unit that can only be used inside of grid, wouldn't it be great if we could use it elsewhere? But unfortunately, it's a unique to grid.

[00:02:57]
So I'm saying basically here, we're gonna have 100 pixels for the second child, which will be the figure caption, and everything else will be, quote, one fraction, It's sort of just the remaining space. So that's what that means. And then we can specify exactly where we want things to go.

[00:03:17]
So, figure A, which is our child here in our HTML here on line seven that figure A, we can say we want it to go to grid-row: 1/3. And grid-column: 1/2 and I'm going to tell you what that means. So if you imagine your figure where it consists of two rows, right?

[00:03:52]
And if we start at the very top of our figure here, this is line number one, okay? This is line number two between our image and the figure caption, and this is line number three down here at the bottom after our figure caption. So when I say grid-row: 1/3, I'm saying to the image, I want you to take up all of the rows.

[00:04:18]
I want you to take up the first row and the second row. And I want you to be in the column of 1, 2. So column of 1 to 2. There's only one column in this particular figure. Makes sense? Okay, nothing has changed because grid very helpfully made another row for our figure caption.

[00:04:37]
It's actually made of third row, even though we didn't ask for it. And then what we can do is say, in our figure caption, we're going to say grid-row: 2/3. In other words, take up just that second row, and grid-column: 1/2. And that we'll put our figure caption right on top of our image.

[00:05:08]
Makes sense? At this point, we now have our figures in place and we have our figure captions overlapping them. Obviously, we have some over overlap here between the image and the next figure. But we're going to address that here momentarily when we lay these out in our desktop grid, where we have all of the figures next to each other in the layout that looks like, Like this.

[00:05:34]
Where we have the big picture over on the left side and then we have the two other pictures over here on the right. Makes sense? Okay, so let's just continue on writing our code here. And what I'm going to do now is for these first three figures, and I'm just going to fold them up so that the code's a little easier to read.

[00:06:04]
For these first three figures, I'm going to lay them out with grid as well. And so what I'm going to do is, at the very top here, I'm gonna add a div with a class of top grid because this is the top grid. [LAUGH] And a /div underneath, okay?

[00:06:31]
And with that div around the whole thing in place, then we could add our top grid styling here, .topgrid. We're going to also display as grid. And we're going to have grid-template-columns: 2fr 1fr. So in other words, make one column twice as wide as the other okay, and there they are trying to cram into all the space there, you see that?

[00:07:05]
It's because we had written half of our code. I'm gonna give this a gap of 2rem. So that'll give us a little bit of space in between, okay? So you see that, and then the very first one here, this coffee cup image here. I need this to stretch down over two rows, and then have these two, the bootcamp and the advanced CSS layouts.

[00:07:36]
I need this displaying over here on the right hand side. So to set that up, we can say, For the top grid, for the figure, that's the first one or the first child, grid-row: span 2. In other words, span yourself over two columns. There they are. Okay. Nice?

[00:08:14]
All right, so it looks like our h3s are probably a little bit big. So let's reduce that size as well. So I'm going to say for my topgrid h3, let's turn off the margin on the bottom to 0, and make our font size, var, how about h5 because it's just a little bit too big.

[00:08:45]
Now, wow, look at that. You have cool overlapping captions with your figures. How awesome is that?