Check out a free preview of the full CSS In-Depth, v2 course:
The "Grid Column & Row Naming" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle show how to name grid rows and columns to reference and reuse them to easily place an item in the grid.

Get Unlimited Access Now

Transcript from the "Grid Column & Row Naming" Lesson

[00:00:03]
>> Estelle Weyl: Showed you how to have the four values of grid row start, grid column start, grid row end and grid column end. Let's say you only have three values there. If you omit grid column end, then the grid column and value would either be, if you name the grid column start that would be or else would be auto, which I think is just one, not 100% sure, it would be one over.

[00:00:32] So let's try that.
>> Estelle Weyl: It's just one word. If however, I did
>> Estelle Weyl: Start, all right? Repeat, 3,
>> Estelle Weyl: Mid,
>> Estelle Weyl: Repeat 9 and,
>> Estelle Weyl: Okay, so let me just put this in here. Okay, so,
>> Estelle Weyl: Here, I actually now have named grid lines. So it's start or 1, I can use either one.

[00:01:43] So here I do start, I do 1. Same thing, right? Start or 1 because the first line is called start but still always going to be 1. And the weird thing is you can actually name many of them, use the same name. We can use the name over and over again.

[00:02:06] So I can do start start start start. So I was having a 12 column layout, I could have every third one name start and that way will be whichever closest one is to start. So let's go with start here
>> Estelle Weyl: And then go with mid here.
>> Estelle Weyl: And 1 fr

[00:02:44]
>> Estelle Weyl: There is a typo here
>> Speaker 2: Is there a space between 1 and fr?.
>> Estelle Weyl: Thank you. Perfect, thank you.
>> Estelle Weyl: So this goes back to what I had originally with which it was to, right.
>> Estelle Weyl: So went to 2 and 5. And I need to make this 8, so it is same as before.

[00:03:05] Okay, so that's the same as before, right?
>> Estelle Weyl: We named the columns, but we didn't name the rows.
>> Estelle Weyl: Let's just do the exact same thing with rows, okay?
>> Estelle Weyl: So now we can use start start,
>> Estelle Weyl: And mid mid. So you see I actually reused the names of grid-column, definitely no conflict there.

[00:03:42]
>> Estelle Weyl: So if I get rid of
>> Estelle Weyl: Let's set it auto.
>> Estelle Weyl: I've no clue why it did that.
>> Estelle Weyl: Cuz if it's a b It should be grid-row. Let's just show you that. So grid-column, 2, 5, 5, 2, very good point.
>> [INAUDIBLE]
>> Estelle Weyl: That would be in the deeper dive.

[00:04:19]
>> Speaker 3: Does RTL kind of things? I mean, what are the impacts of shifting the RTL inverse.
>> Estelle Weyl: Okay, so it's kind of like Flexbox. If you remember yesterday when I discussed Flexbox and basically said main direction is this way. But in right to left languages, it will actually reverse it for you, yeah.