 Hi there, my friend and friends. This piece of code right here, which is probably the single longest declaration I've ever written, was the first stage in me realizing that I've been sleeping on what might be the most powerful bit of CSS grid that's actually out there, and definitely one of the most underrated and underused features in CSS that I can think of. I mean, look at it. It just keeps on going and going and going. But what I'm here to talk to you about today is using named grid lines, which is the bits of code that are inside the parentheses. I dismissed using named grid lines early on. I've seen the light now, though, and I'm going to do my best in this video to convince you that you should be using named grid lines through three awesome things that they make possible. I think each one being a little bit better than the last one. And I'll even squeeze in a fourth example at the end that takes advantage of all of the previous little things I'm going to explore up until then plus one extra cool thing to show you why I think they're probably the best feature of CSS grid and something that basically nobody is using, which you should be. So let's dive into some examples here. And the first one you might recognize, it's where I came up with this giant declaration that's prettier has actually broken off onto like five lines because it's so long. And it looks very long. It looks convoluted for sure. It is made easier by using some custom properties. But what I like about it is I've named my grid lines so that I can say where different pieces live. And we're going to come up with other examples if you did see this video previously. But just to show you really fast, I can come on something and I can say this is a breakout. And it's going to go wider because it's now living in the breakout area, which is already really cool. And then I can come down to here and I can say this is a full width with a different background, we'll say primary. And it gets the full width, but the content here still lives where we want it to. It's I love this type of thing. And I do most of that just by saying grid column breakout, grid column full width. And it's all based on the line names that I have here. Super cool. I love it. But we can do a lot more with this and building on top of this idea that I set up here, I want to take a look at this example. And with this one, if I just move that out of the way, we have the code here. And you can see here I've set up my grid, you can see the line numbers up top there are the line names I should be saying, let's make this a little bit bigger just so you can see I have the full width start and content start and content and full width end. So I've created the simpler version of what we were looking at before, full width start, content start, content and full width end. This is sort of the same idea of what I was doing in that previous one. But the nice thing that comes with this is not only can we live in the content area or the full width area, but we can do a little bit more than that. So if I go into this primary header layout, which is what's holding all of this in the content area right now, I could actually change the grid columns for this. And I could say that it's going to start at my content start, but go to my full width end. And before I hit save on that, let's just shrink this down a little bit because we don't really need the code so much. Let's hit save. And you can see that the navigation on the right side has broken out to the right. And this is one of those patterns that you see sometimes this is based on a design for my code this and it had this thing where it was sticking out the side. And this is always an annoying thing to do, but just be able to say, well, this starts where my regular wrapper container thing would normally start, but it just can bleed out the other side. That's amazing, right? And we can improve this even more. So the first thing is that's the first thing we can just easily manipulate content and get it to go where we want it to. And of course, I could do the opposite. I could say that this is going from my full width start over to my content end. And in this case, with this layout, it wouldn't make much sense. But then we get the opposite effect going on. And actually, let's just turn off my grid, just so we don't have those lines showing up, but it gives you an idea here. I'm now lining up on the right side, but the left side is bleeding out. But this is a little bit, you know, kind of annoying to do. So we can actually improve our grid line name. So this is the second thing that I think is really cool, that definitely doesn't get enough attention, which is that you can give named lines to different names. And that might seem a bit weird. But this really goes with this full width start and content start and content end and full width end thing where the start and end when I put those, you notice that here, I'm just saying full width, or I'm just saying content. So I don't know this is part of the way the syntax for this works. And we can really lean into that. So I can have a full width start, plus a breakout left start, then on this one here, where my content start, it's also going to be a breakout right start. So that one has two names, then I'm going to come to my content end, which will also be my breakout left end. And here I noticed that I put a hyphen that I don't want. So breakout left end. And on this side, we're going to do a breakout right end. There we go. And then I have my full width end as well. And why, why would I want to do something like that? We've made our long things even longer now. And one of the things with CSS that's always nice is like the short declarations that we can do. And this obviously is the opposite of that, but it's worth it. So if I do that, let's turn my grid back on for a second here, just so we can see those names show up. And I know it's really small, but those things, they actually have two names each now. And why that's cool is if I have an element that's living on the grid, like this header layout that I have, I can just come here. And let's shrink this back down so we can actually see the code at the same time. And I'm going to turn off my grid just so it's easy to see what I'm doing. I'm going to delete this grid column where we have the start and end. And I'm just going to say that we have a breakout, right? And it breaks out to the right. Or if I need something to break out to the left, it breaks out to the left. And that's it. And this is like a simple example, right? I have a main area and then I have my left and my right that I can bleed off like full width onto. And it just works. But you could always have like multiple levels of this with multiple, you know, lines and have complete control on where they're going by giving them multiple different names. And we wouldn't be able to do this with grid areas versus using the columns. Because if we did it with areas, it would cause overlapping content, which can be a good thing. But just just being able to do this, I find so cool, right? The double line names making that so easy to do, especially if this is a common pattern that you end up having on your site, or the project you're working on or whatever, or you need to do things like that. It's just chef's kiss simplicity, definitely takes a little bit of setup, and it takes very long, weird looking declarations for the setup. I won't lie, but the functionality and the use of it is just so nice. And actually, we're just talking about grid areas. So the third thing that I want to look at is how we can sort of replace grid areas in a way. And to do that, I have another example that we're going to look at. And here's a front and mentor project that I was working on just having some fun with. And we're going to be exploring this area to start with where I'm sure you've had these types of things you have images that bleed off, or something like that. And they can be a little bit annoying to do, right? When you have these backgrounds, they're smaller than the image itself. And if we look at it at different sizes, it's always sticking up, even the mobile design and everything, it sticks out the top. And there's definitely other ways that you can approach this. But dealing with negative margins and having to fight with stuff like that can be annoying, whatever it is, they're never super fun to set this up. And so what I thought of is, could I do this with name grid lines? And it was sort of front of mine for me after creating that other part. And we're going to get around how we can use them over on for something like this as the last thing that I was sort of teasing at. But what we're going to do here is let's jump over to this where you can see, I've set it up, I have the content that I want. We can actually get rid of this one, because that's the wrong code. And here we go. So I have my testimonial set up and whatever I have a background color on it, I have some text and I have said display grid and center because default was centered with some text line centering and stuff. I have my image set up here and I have some text set up here, but nothing too fancy, right? So basically image, a text box and just the main div around it all. And the reason that I thought about using named grid lines here is because what you can do with name grid lines that you cannot do with grid areas is you can create overlapping grid areas. And that was always something for me that was missing because if I tried doing this just for fun and you could definitely come in with a combination of named grid areas plus line numbers. And that could work, but I always, you know, if you can do it all with just grid areas, that's kind of cool. Now, if you do need this type of background, you don't have rounded corners, a gradient might actually be the easiest way because you can just have hard stops, but I needed rounded corners on it. So what I thought about was using a this here instead, where I came in with a pseudo element because that sets up with my rounded corners and then I could like control the height of the pseudo element. So it's sort of breaking where I need it to, you know, be set up. And I'm just using a position absolute, putting it behind everything else, nothing too complicated. And for this, I definitely could have just like, I have an inset of zero, I could just manage my top to bring it down a little bit, right? So if I did, say a top here, and if you don't know inset, it's top bottom left and right all of zero. So I could say top is like 200 pixels or something. And I would pull it down and, you know, we could be happy with that. It set up my two columns, we're good to go. So this is maybe a slightly convoluted example in that sense, but it's going to pay off because we're going to use what we learn here to here, which I think is maybe more practical, but we're going to step things up with an extra layer for this top part. And I think this just, it opens up a layer of control that we don't have otherwise. So I just want to explore it maybe with a simple, you know, somewhere we might not 100% need it, but it will pay off in the end. At least I think so. It just shows how we can create overlapping grid areas is the focus that I want to do here, because we cannot normally do that. Say we wanted to create some grid template areas, right? So I could do this, right, my image and my text, and I save that. And then I could just come over here and I could say this is my grid area of image. I think I did image like that. Let's just double check. Yep. And then here I could come in and say that this is my grid area of, sorry about the auto fill things there, but grid area of text. And it's going to look the same, but the advantage and this is why grid areas are great is because then if I came in with a media query, I could just change that, right? So we could then say that my dot testimonial has some grid template areas. And then I could say it's image text like that, except we need the quotations around it. There we go. And then they go next to each other. And then if I open up my responsive mode, we can test that and you can see like, you know, when we hit that 900 point break point, they go from like this to like that. Grid areas are the best. It's so cool being able to control that here just by, you know, I don't have to touch the children anymore. They just follow the place I want them to be. But then I want maybe that background to be part of that grid as well. And I can't do that because I can't come here and say that this is going to be my background. And then I need my background also and here, but I can't, there's no way of doing that. If my background is here, my background is there, right? So if I came to my testimonial and I said my grid area is my background. And it just right now, we haven't changed anything. And not only like this would just make three rows and that wouldn't work. And then how would I do it over here? You can't do it, right? You can't have like, you can't even set up if you wanted something more complex where it's like image, image, and then image background, like you can't do something like that either. The grid, this just doesn't work with grid template areas. And just because of the way the cells work and everything, and you can't do Ls and that type of shape anyway. But what we're going to do instead of using grid template areas, and granted is a little bit weirder to set up, but we can come in with, I'm going to have these already to go because typing them out would take forever. But we can do this all with our grid template columns and grid template rows instead. And so here, I'm going to say that at the small screen sizes, I have my image start background start text start, and then I have my auto and then I have the end here. So this is just for my columns. So basically, they all start and they all end at the same place. Nothing, you know, we don't really need anything here. But the reason this is cool is because then if I also give my grid template rows names, so I have my image start a space there, then it's my background starting, then I have my image ending my text starting my text ending with some auto rows set up, then this is actually going to work. And of course, I don't want this ending right there. There we go. So again, it looks a little bit weird. It takes a little bit of time to wrap your mind around. And then by having all this set up like this, I can actually come and say grid area image, and I can say grid area text. And the last one we're going to need is down here on the testimonial, we're going to say that this one is my grid area of background. And now by setting those up like that, everything is actually going to work. And this is only at small screen sizes, but you can see it's functioning. And it's doing what I want it to do. And I've created overlapping grid areas, which is super, super neat. And you can't see them if you look in the dev tools, because they're implicit grid areas, they're not actually named, in a sense, because it's using the line names here. So even though this is on my columns, and this is on my rows, I can have the areas work when I declare them here. So if we go back to that media query where I'd set up this, obviously, that's not working, but we can replace it with this. And I just redefine how I want my everything to be set up. So now I'm saying I have my image and background are both starting, then I have just a column, then I have my image that ends in my text that starts another column, and then my text and my background both end. And then I also my image, which is going to stick off the top, how much it's sticking off by my background and text starting just a column. And then I have everything ending at the bottom. And I hit save on that. And now it works there. And it works over here. And I have overlapping grid areas, which I just the simplicity of working this way again, it takes a little bit of thought to get it working here. But the payoff of when it works is just makes me so happy. But again, you might be going Kevin, you just had to do the inset and you'd be fine. So let's look at this example that takes things up even a step further in how I've set this part up. All right, so if I go up, I've just so you know, I've broken the layout a little bit, you can see the text here is going across my image too. But let's just explore the basics because here I did use the same method to set things up. And so I have my text image start on my columns. So this is my hero grid. Let's go look there, actually. We have my hero grid right here. In there, I have a div of my hero text, I have a image, and then I have the benefits here. So looking at the layout, I have the text on the side, the image down the middle and this on the right side there. And the reason that I wanted all of the text and a little bit of what I'm going to look at here, we could simplify in a way. If I put the page title of paragraph in the button outside of here, but we'll explore why that's a bad idea too, because it simplifies one aspect of it, but makes it more complicated too. But we get the hero text, my image, my benefits, and then I just set up a grid line name for each of them. So my text, my image, and my benefits, and then my text, my image, my benefits ending, and then I did the same thing for my rows. And so at the largest screen sizes, we have the text, column, image, column, and then text end. And that's why the text is overlapping my image right here, because my text is starting, then my image is starting, then my text is ending, then my image is ending, and then I have the benefits all by themselves at the end over here. And then for the rows, I just did the really simple thing. And this is just because I wanted to use the grid areas. So a little bit like down below where I just had this auto here is just so when I'm using the grid areas, everything is defined. So we're starting everything here, we have the auto, and then we're ending everything here. Now that's not always the same case, because at one point they stack. So we're playing around with these of the different screen sizes for everything to work. But if ever you just need like one row for everything or one column for everything, this is sort of the way to do it. The reason this is sort of where everything comes together is because we can use this along with one other feature. And the problem here, if we look at the original design again really fast, I need my text to overlap the image. And I only want the text of the heading to overlap and not this part underneath. So if we come and take a look here, this is set up. And I said, well, you know, ideally, that's how I'd set things up. If we turn on the this grid right there, I have this column, I have the column here that my text is going into as well, because we created that overlapping area. And then I have my benefits over here at the end. Or if I shrink it down, I just wrap the benefits down onto the bottom. But, you know, this is what I wanted, but I wanted to make sure this didn't actually bleed off into that area. So as I said, one of the options to be able to do that would be setting everything up the same way, but not having all of those hero text things grouped in one div. The problem then is each one of those creates a new row, and then you have to play around and position each one of them. And I didn't feel like dealing with that nightmare. So I liked the idea of just having to group everything in one div. Now I could come in and try and figure out like a max width that I could put on these. And that would work. And I'd still have this benefit of the overlapping grid areas and stuff, which I find so cool. Right, because I'm not redefining grid line. If I did this with line numbers, I'd have to redefine the line numbers here, because it's a negative one to our one to negative one, and, and all of that. And then I'd get to this point, and then I have to redefine the grid line numbers again, and then I have to redefine them again here. Whereas with this method, I don't have to do that. I'm just saying that my hero text, here, my hero grid image is my grid area, my hero text is the text, my benefits is the benefits. And that's all I'm worried about. And then everything else just falls into place whenever I redefine those areas, which is why I've always liked grid areas to begin with, but the lack of overlapping content will mean most nuts. But what's coolest about all of this is if I come on to my hero text here, I'm going to do something here, which is going to be a grid template columns of sub grid. And I know sub grid doesn't have the perfect browser support yet, but it is supported in all the engines now. So it should be shouldn't be too long before it ramps up. And that sort of breaks this, right, in a sense, because now my title is here, and then the paragraph is going here, because my columns are now sharing the two that we have here. But what's really nice about named grid lines is they also worked inside of sub grids. So on my page title, I can just come here on my page title, and let's just shrink this back down so we can see what happens. And I can just say that my grid column is text, hit save, and boom, I'm done. Because this is going from my text start to my text end. And that's it. It works. And this one is it can't go, you know, let's actually we'll turn off the main grid that we're looking at here. And we'll just look at the sub grid that's been created. So here is my sub grid. So this one, it can't go over into this area, because it's only has these two cells. So as soon as I told that this one has to spill across both, the only place this had left to go is down here. And I just find that so cool. And it just works so easily, right? And then it we just do that. And then here, I just have everything as we saw stretch the whole width. So it, you know, we're down to one column, the sub grids even been turned off because I had that in a media query. And it just works and it works so well. Like most things with CSS grid, it takes a little bit more time to set them up, especially in it bulks things up and it does make your declarations a little bit harder to read. But I just find from like the simplicity of, you know, things like this that are super cool to having this where I can easily break content out with just a grid column name on it. It's not always about the setup. It's about how we use these things. And so as we're developing a site, we just throw a third column, tell it where to go and it goes there. I couldn't ask for more in setting all of this up to explore it. I wanted this video to be a bit more of a higher level exploration onto why I find this feature so great. If you didn't see the video where I set this up, it is a bit of a deeper look into named grid lines. And it is right here for your viewing pleasure. And if you'd like a slower breakdown of taking advantage of them like we did here, just leave a comment down below and let me know. And with that, I would like to thank my enablers of awesome web on demand, Andrew, Simon, Tim, and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.