 So, you can see I've already set up a few things here. We have a div of overlapping grid and nested inside of there, I have an H1, an image paragraph and I've styled things up a little bit but these styles aren't anything to write home about. They're just so it doesn't look terrible. There's nothing to do with grid in there yet. And so what I'm going to do on my overlapping grid is a display of grid. Do you know how many times I've come in and done like a grid, you know, I do this grid template columns and I set up like 1FR, 1FR, whatever and I just completely forget that I need the display grid and I'm like, why is it not working? It drives me nuts. But anyway, here we want not grid template columns, we want grid template areas and we're going to set up a few different ones. And it's this idea of what I want to sort of do here is I want new image, image, image. Then I want to have my title and then my text, my regular text, I guess that could be body but whatever. And then I want image, image, image again and I want this one not to be title but like title and image, right? I want these overlapping things so my image can take up more space but I am in Firefox here just because I find Firefox has nicer debugging for this. And the reason I wanted to use the Firefox one is just because the area names, let's bring this into view, the area names, if you have area names, they show really well whereas in Chrome they're hard to see on the screen. You can see the area names aren't even showing up now and it's kind of weird, right? I've set everything up. So if we go and look here, you can see it's actually getting crossed off and what we see there is invalid property value because I've put the same one twice. You can't have two different areas with the same name. Huh, that sort of stinks. So what I'm going to do is actually, I'm going to come in with some long names here just because they are going to describe really well what I'm doing. So I'm going to call it section one and then we're going to have another, we're going to take these three down here and I'm just going to do all of these as an image section two. And by doing that, you can actually see now my grid areas are working because we don't have repeating names. We couldn't do that overlapping stuff that would be really cool. So I've set it up like this instead. And what's really interesting when you have different sections set up like this is let's just go and look at my H1 for now and I'm going to give it a background that is red and we're actually going to space things out a little bit. So I'm going to delete this after, but just so we can understand what's happening. I'm going to do a grid auto rows as 100 or let's do 200 pixels and we'll do a grid auto columns as one FR and actually we'll make this one a little bit. Oh, that works. There we go. So we can actually see like all the boxes and all of our grid and what I'm going to do on my H1 here is I'm going to take advantage of something so we can understand how this is going to work. And so I'm actually going to use a grid row and the grid row. So we're looking up and down. I wanted to start here, but I actually wanted to end over here and title. And so you could do spans for that, right? I could just say span to even I think and that would work span to like that and it's going to span across to or I could do a span three and then I could spend three or I could use the line number. So say I wanted to go from two to four, I could do that grid row two over four and it's going to start at line number two and it's going to go down to line number four. Not too bad. The other things fill in the space because it's moved all cool and dandy. But one thing that's interesting when you do set up your columns and your rows, you can actually name them and I haven't done that in this case, but there are ways of naming them. But as soon as you set up grid areas, they're also named lines. So what I could actually say here is my grid row is image section one over title. And if I do image section over title, it's going to start. And the white space here is because there's a margin on there, right? So we get to say margin of zero in there. So it's starting at line one and it's going down to the end of line three because it's starting in my image section one and it's going over to title. Another interesting thing with this is when you have named lines is it actually knows the start and ending of those. So this technically is actually title end because it's going to the end of title and I could actually have it stop here, not that it would serve much of a purpose, but I could do title start and it's going to stop at line two because it's going to the start of title or I could do my image section to start and it's going to be like before because it's going to the start of section two or I could replace that with end and it's going to go to the end of section two and you could do this. I'm doing this on my rows right now. You could also do this with your columns as well. I think it's really cool. And this is what we're going to take advantage to actually get things to overlap. And there is one thing is when I do this, you're going to say, well, Kevin, couldn't you just do this with line numbers instead? And you could sort of do the basics parts that I'm going to do. But the real power of grid template areas comes when things start moving around with media queries and when you need to rearrange content a little bit. And that would just mean you're redefining all of your like the line numbers and where things are on the page. And that's never fun to do. So even though we're taking this thing that initially could be done with line numbers, the real power of it's going to show as we sort of build this out and make it a little bit more responsive. So hang with me just for a second and really see the real power of this. And so what I'm going to do is let's leave this here. We won't do the media query yet. We'll come back to that, but let's go and set my grid areas up. So here we want my grid area of title. We'll just copy this guy and we'll go on to my P and we'll say this is a grid area of text and it should fall into the two text blocks that are right there. Perfect. And so then what we'll do is let's come in with my grid template and not my grid template, just a grid row. And my grid row is going to be we wanted to go from image section one to start and we wanted to end an image section to like that to there we go. And it's sort of doing what we wanted to. But let's just fix this by saying that the grid column, because right now what it's doing is it's going well, it can't by grid doesn't want things to overlap by default. So we do have to tell it that it actually lives in the same columns as these other things. So for this one, we could use line numbers. You could do the same trick that I'm doing now. It depends on how you want to set things up just for brevity's sake. I'm going to use my line numbers for now. And then what we'll do is we'll come in here and we'll say that this is going to be a width of 100 percent, a height of 100 percent. And I don't know if we need it, but we'll throw an object fit of cover on there as well. And actually, maybe we'll end that at line three, just like that. And I think it'd be a little bit more interesting. There we go. So let's turn off my overlapping grid just so we can actually see a little bit more what's going on. And let's also take the red background off of here because we don't really need it. And we start getting this like overlapping type of content going on, which is kind of interesting. We can take off our auto rows and auto columns because we don't need those anymore. And there we go. I think that looks a little bit more interesting. We get something that's there. Let's do one more thing. Align, Align Content Center. Or is that Align Items? I never remember. We wanted Align Items. There we go. So that center, that looks a little bit better. We could probably throw a gap on there, but maybe we don't need one. So there we go. That looks kind of interesting, but it starts to break when you start getting to these smaller screen sizes. So what I'm actually going to do is steal all of this out of here. I'm going to throw it into here. So overlapping grid in my media query. And so at the large screen sizes, it's going to be using this. But now obviously everything sort of breaks at the small sizes. But what we can say at the small screen sizes now is we can just redefine these grid template areas. So grid template areas. And this is why grid template areas are the best. What I could do is my image section one is over here at the top. Then I have my title. Then I have my image section two. And then after that, I have my text. And just like that, we will get something that's a little bit different when we get to these small screen sizes, where now this text is no longer overlapping because there wasn't enough room. And this is really taking advantage of being able to redefine the entire layout using grid template areas and not having to go in and play with my line numbers on all these different things when I'm changing my different sizes. And I can still have overlapping content because of it. It's just so cool and so handy. Now, one thing is I used a lot of grid stuff here and I didn't really talk in depth about how any of it's actually working. I just wanted to show you how we could do this one thing. If you're newer to grid and I left you a little bit in the dust or you're a little bit confused or you want to dive deeper into the world of grid, I have a small playlist for you right here to help you explore grid and learn it in a little bit more of a broken down and step-by-step type of approach. And with that, a really big thank you to Zach Randy and Stuart, who are my supporters of awesome over on Patreon, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the Internet just a little bit more awesome.