Figure & Figure Caption with CSS Grid

[00:00:00]
>> But this is one of my favorite new tricks that I'd like to demonstrate for you here inside of CodePen. So we're looking at number 11, we're in chapter 11. This is the beginning state and we're looking at figures and figure captions again. When we were working in flexbox, I walked you through the process of overlapping a caption onto a figure using absolute and relative positioning.

[00:00:27]
And that is a wonderful way of doing things. It's been around for, gosh, 15 years now that you've been able to do something like that. Although not necessarily the figure tag, but the concept has been around for a very long time. One of the really interesting things that grid does that flexbox does not do is grid allows your cells to overlap.

[00:00:49]
So by leveraging grid inside of your figures and your figure captions, you can overlay your figure captions very nicely over your figures here, without even having to use absolute and relative positioning. So let's take a look at how exactly that would look here in this particular example. So what I've got inside of, I have a div with a class of row around all of these particular figures.

[00:01:15]
Inside of that I have four different figures, they have different content, but they all have the same markup. So the way the markup goes, we have a figure, we have an image. And then we have our figure caption. In the figure caption and it has an h2 and a paragraph inside of it.

[00:01:31]
So where are our children? And where are our parents? We've actually got two sets going on here. So first of all, to create this set of four cells here laid out in the following way. That's actually, if you scroll down in the CSS I've already given you. I have a media query here set up for 600 pixels and higher.

[00:01:58]
And this is set up with display grid, grid template columns of 1fr 1fr, and a gap of 2%. So, that is our first round of layout. That just gives us a very nice layout of those four cells there on the page. Now we're going to do a second set of layouts.

[00:02:15]
This is going to be within the figure itself. So where are the parents and children? Here in inside of our figure. We have a figure and it has two children, an image and a figure caption. So, what do we need to do? If you plan in advance, what we wanna have happen is, we wanna have our image and our figure caption.

[00:02:39]
We wanna have the figure caption overlap that image at least somewhat. So our figure is going to wind up being our grid container or our parent. The image and the figure caption or our grid items or the children. And we're going to somehow make these two things overlap using CSS grid.

[00:03:00]
So let's write that code now that I've explained to you the thought process behind what we're doing. So, I've got several declarations here, a figure captions, and figures and all the rest of it. I am just going to hit return a whole bunch of times, just to keep things straight forward as to what I'm adding here.

[00:03:23]
In the real world you would probably combine all of these into single declarations. But for now, for learning purposes, let's do it this way. So I'm gonna start with figure. And I'm going to set it up to display grid And I'm going to have a single column. The layout is here exactly as I want it.

[00:03:47]
I want everything to be in one column, but I'm going to declare that column. So grid, hyphen template, hyphen columns. And we can just set that up to be again, one fr. The actual width of this column doesn't really matter, just take up the full space. So one fr is just fine.

[00:04:08]
And I'm gonna set it up interestingly with three rows, so grid, template, rows. Repeat, three comma auto. So I wanna have three rows, you figure out how tall each of those rows are. Why three rows? Because we're gonna start with, in our initial three rows, what grid will do is say, okay, I have an image, that goes in row one.

[00:04:38]
I have a figure caption, that goes in row two. And I do have a third row, but it's currently empty. You don't necessarily see that displayed on the screen. Grid knows that it exists because we have declared that it exists, but it's not populated with anything at this particular moment in time, okay?

[00:04:58]
So now what I wanna do is, I'm going to set up my image and my figure caption. So for my image, I'll set this up to have a grid hyphen column have 1 slash 2. In other words, I want it to occupy the only column that we have and it goes from one to two.

[00:05:22]
And I'm very specific about that. It will actually apply to all of these items here because this is some very generic code. And we're talking about an individual grid system in each one of these figures, so it is actually going to apply all of these individually. And then we're going to have a grid hyphen row of 1 slash 3.

[00:05:45]
So my image is going to span across the first two rows. Remember I declared three rows, the image is gonna occupy rows one and two. Now the figure caption is occupying row number three. You actually wanna see a change here on the screen, but that change happened behind the scenes inside of grid.

[00:06:08]
For my figure caption, I'll say again my grid hyphen column will be 1 slash 2 because I want it to take up the same number of columns as well. But then my grid row will be 2 slash 3. So now my figure caption goes up over the top of the image.

[00:06:33]
See how nicely that's overlapping here? And that is because my image is taking up one to three and my caption is taking up two to three. So now it looks this particular way. You can tweak this further by indicating how high you want the figure caption to be.

[00:06:51]
You could put that right on up here in your grid template rows. You could have them be auto, auto, and then a very specific height for the caption, if you wanted to do it that way. You could leave it the way I have left it, which is this is fine, just set it up that way.

[00:07:06]
Whatever you wanted to do at that point in time to tweak that a little bit further. But this is a technique that is really fantastic. We don't have to worry about absolute or relative positioning. We don't have to worry about other absolutely or relatively positioned elements on the page.

[00:07:24]
It's very, very straightforward and this is probably the best way having your image and your figure caption overlapping each other very nicely inside of this type of system. The big difference between this methodology and something with absolute relative positioning is this, absolute and relative positioning we can have pretty much any element down our tree.

[00:07:58]
And we could take an element that's way down in our HTML and position it relative to something that's way outside of our tree. Here where we're working with grid, the two elements or however many elements, have to be siblings. So here in the HTML, this works because we have image and we have figure caption.

[00:08:21]
They are next to each other in space surrounded by the same wrapper. So the effect that I have here is going to be somewhat limited. It's not as flexible necessarily as absolute and relative positioning. It's not complete takeover of that, but it is a great way of doing things, if you have this type of markup.

[00:08:40]
Okay, yes, Mark.
>> Why choose three rows instead of two?
>> Why choose three rows and instead two? because most likely you don't want your figure caption occupying half of the height of that image. So if you had two rows that may be what you wind up with as default.

[00:08:58]
You could, of course, do it that way and then specify that your second row has a shorter height, for example. You could say maybe that row was taking up whatever, a third of the height or a quarter of the height and let the other row take up the remaining part of it, that would work fine too.

[00:09:16]
But as you see here, the number of rows overall doesn't really matter. If there is a row with nothing in it, grid isn't even displaying it. So whatever works for you is probably just fin.
>> This is cool
>> It is very cool isn't it? As I said, one of the really powerful features of grid is the ability to overlap cells.

[00:09:38]
And a lot of people aren't taking advantage of this yet, but this is a great case for doing that.