Overlapping Rows & Columns

[00:00:00]
>> There are some things you can do with grid that you may not necessarily think about in terms of design. You just don't even realize that you can do these kinds of things. So one of these tricks that I just love is the ability to overlap grid cells.

[00:00:14]
And so I wanted to go through how we would go about overlapping grid cells here. So in 8A, let's look at these overlapping grid cells and figure out how they work. So if we open up that CodePen, You'll see here that we have four of our lovely planet pictures, so awesome.

[00:00:34]
And underneath of those, we have captions that go with them, right? Saturn and the moons, Jupiter, we have Triton and Neptune, Pluto and Charon. Okay, and these are marked up as these are marked up as figures just as we saw them earlier so we have a figure. The figure has two children it has an image and it has a figure caption, yeah?

[00:01:02]
Okay, so it's always good to take a look at your structure of your HTML and start thinking about where we could have parents and children as we do our layouts. So here, our figure contains two children. What I'd like to do is I'd like to put my caption on top of this image, okay?

[00:01:23]
So rather than having the caption underneath, I want that caption on top of the image. So let's go through how we would make that magic happen. So first of all, I've got this set to a min width of 600 pixels, which sets This is up with this layout of the two by two images.

[00:01:42]
I'm just gonna say we want this to happen at this point. So I'm gonna put this inside of the media query, but obviously you could have put this outside of the media query and then it would work throughout your design. I'm gonna say my fig caption, let's change the way this look.

[00:02:00]
So we'll give it a background color of 001219, okay? Which is a lovely shade of black. We'll set the text color to white, so that we can actually read it and maybe we'll give it a little bit of padding, like one rem, okay? So actually, that looks cool just like that [LAUGH].

[00:02:30]
It's not a bad look, but that is just the starting point of our process. So now what I'm going to do is I'm gonna take my figure and I'm gonna To set it to display for grid. Grid, it will have two children and it will have the image and it will have the figure caption.

[00:02:47]
For the figure itself, we'll say display grid and then we'll say grid template columns 1fr because there's only one column, okay.? And then I'm going to say my grid template rows are 70% 30%. So I'm not using something like pixels or fr or whatever rims or anything else for my temple rows, I'm just using percents.

[00:03:22]
Whatever space is available, assign 70% of it to the top row and 30% of it to the bottom row, whatever that happens to be. Okay, now we need our image to stretch across all of the rows. So what would my value be for grid row? I need my image to stretch all the way across, be the whole height of the figure.

[00:03:53]
So all of my rows, what are my numbers for grid row?
>> 1 to -1?
>> 1 to -1, sure? I think that works. Although I'm a little concerned about where my figure caption went. So I'm gonna change it to 1 to 3. I'm still concerned where my figure caption went, but that's okay.

[00:04:20]
We'll just continue on and then I'm going to say my image is going to be in the grid column. I know where my it went, 1/2, okay? And I have a note here in my notes. It may look like the captions disappeared, but don't panic.
>> [LAUGH]
>> Don't panic, all right?

[00:04:44]
Okay, so next we'll have the figure caption display the same column and in the bottom row only. So for my fig caption, make sure you have a style for that up here, so we can just continue to add to that I am going to say, grid column 1, 2, I actually want it in the same column as my image.

[00:05:06]
And my grid row will be 2/3. There it is. See how it's overlapping the image now? See how it took a bite out of all those images? Okay, so it looks good. What would look better if we add some opacity of 0.7, make it a little bit see through.

[00:05:32]
Nice, and so then the last problem that we have here is that the HTML inside of each of these captions, inside of the caption, we have an h2 and we have a paragraph both of which have some default margin associated with them. And that is what's causing this weird cut off of the text here on the page.

[00:05:53]
So, what I can say here then, in my CSS is Figcaption greater than signed star. In other words, for all of the children of figure caption that would be the H2 in the paragraph, we wanna set the margin to 0.5 rem. So we're just gonna tighten up those margins a little bit, and then we'll pull the text here up onto the screen.

[00:06:23]
So pretty, what do you think? So we didn't have to use absolute positioning and relative positioning because we all know how that makes your brains explode, yes? We can just use overlapping grid cells, it's a much nicer world to live in, okay? Any questions on this?
>> When you get smaller towards that 600 pixel mark.

[00:06:55]
>> Yep.
>> Everything kind of gets shifted down. If you go a little bit bigger.
>> Uh-huh.
>> Right there.
>> Okay.
>> Add padding to the bottom so that both of those are centered in that caption box.
>> You could. Probably what's causing this issue right now is that our grid template rows are set to 70%, 30%.

[00:07:19]
So we could change that to 60, 40. Right?
>> Yeah.
>> And maybe what we need to do, because this is now, so this is 600, and then maybe by 700, it's a little bit too much, right? So what we could do then is we can do another media query, exactly.

[00:07:43]
So we could say @media min-width 700px. And then we could say for our figure. And this may be the only thing in this media query, figure. Grid template rows will go to 70 30. There's nothing that says you can't do that. You don't have to have a million billion styles on every media query, right?

[00:08:14]
So we could tweak it so that it works there until it goes there. And the only crazy people who sit here and do this on websites are us. So normal people won't do this, and it'll be fine.