Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:41 minutes
Grid400 2
  • Overview
  • Transcript

2.4 Working With Grid Line Names

By default, grid lines can be referenced by their numbers. They start from 1, and then go to 2, 3, and so on, depending on the number of tracks. With CSS Grid, you can also name your grid lines to give each one some kind of context. Let’s find out how.

Related Links

2.4 Working With Grid Line Names

By default, grid lines have numbers, they start from one, two, three, and so on. And when you want to position items, you use those numbers. Right, just like in this example, I have a simple grid with three columns, three rows, and then the header. I tell the tool, start at grid line 1 and finish at the end, and it goes from here to here. The main starts from 1 here and spans two columns. The aside starts at number 3, and it spans the one track. And then for row, it starts at 2, it ends at 4, and so on. The footer starts at column 1, or the column starts at grid line 1 and finishes at grid line 3. Right, so this is a very typical use of grid lines. Now, you can also name lines, and you would do that in the following way. So let's the set the second container here also display to grid, we're gonna give it a little grid-gap, 0.5 rems. And then I'm gonna say grid template columns, what is it, 2fr 1fr 1fr. Right, it's the exact same structure that we have here. But to add names, you do that basically in front of the size declaration. So here I'm gonna say c1, that stands for column 1, but you can name this whatever you want. Here I'm gonna say c2, and that stands for column 2, here I'm gonna say c3 for column 3. But the cool thing about naming grid lines is that you can assign them multiple names. So just put a space here and say the secondary name, in my case, it's called 3. And then I can also do this, I can say right-side or whatever name i want, just to mark the end or to name the last grid line. And I can do the same for rows, so grid-template-rows, what do we have? 1fr 3ft 1fr, so 1, 3, and 1 again, and I can name these as well. I can say r1 for row 1, this can be row 2, this can be row 3. And I can also name the last line, let's call it bottom-side. So with in mind, I can then go on and say, container-2 header, grid-column, start with c1, which is column 1, and go to the right-side, which is the end of my grid here. What about the main, well, we'll simply copy this. So the main, I want it to go from c1 to c3, right, to column 3, and it's gonna go to column 3, the aside will go from column 3 to the end. And let's also set grid-row, let's say it starts from row 2, so r2, and it goes to the bottom-side so that's a sidebar. And finally, the footer starts with c1 and goes to c3, right, or I can say col-3 because col-3 is also a valid name for this grid line. And as you can see, we achieve exactly the same layout as in container one where I just use grid line numbers to position these elements. Now what you saw here are called explicit grid lines, where we explicitly named our grid lines. But there are also implicit grid line names. If you remember from the previous lesson, we talked about grid template areas, and how you could define an area, basically, by giving it a name. Well, when you do that, the grid automatically assigns names to the lines surrounding that area. So if, for example, you would name an area, let's call it header. Well, the surrounding lines, let's call it vertical, are gonna be called header start in the left, and header end at the right. Also, on the row side of things, we're also gonna have header start, header end. And it goes for whatever names you might have, or for all of the areas that you define. So if you call an area, let's call it, I don't know, secondary, you're gonna have secondary start, secondary end, both on the left, right, and then top, bottom. So those are called implicit line names, and that's how we can name grid lines, and also position items using those names. Now coming up in the next lesson, you'll learn about an amazing function called minmax, see you there.

Back to the top
Continue watching with Elements