Check out a free preview of the full CSS In-Depth, v2 course:
The "Positioning Grid Items" 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:

You can position a grid item anywhere in the grid by listing the start and end gridlines

Get Unlimited Access Now

Transcript from the "Positioning Grid Items" Lesson

[00:00:03]
>> Estelle Weyl: So let's go on to the next feature which is placement, placing the grid item. So earlier, I talked about the grid lines and the grid lines are in red and the grid items are in blue. So if you see, I have a three by three grid but I have four grid lines.

[00:00:17] One, two, three and four, across and down. So when I place an item I say, basically, at which grid line does it start and it which grid line does it end, both in the direction of the row and the column? So I have four properties for that or several even more than four properties.

[00:00:39] I can say my item, grid rows start at two, so it starts at the second line and it ends at the fourth row grid line. And it starts at the column start of the second grid line which is right in front of the second column. And it ends at the fifth column line which is after the fourth column.

[00:01:01]
>> Estelle Weyl: There's actually shorthand for grid-row-start and grid-row-end, which is just grid-row. So you put the number and then you put a slash.
>> Estelle Weyl: And then, there's also a shorthand for grid-column-start and grid-column-end, which is just grid-column 2 / 5. So the grid-column start, slash grid-column end. And then I could do short hand, and basically say, grid row start, grid column start, grid row end, grid column end.

[00:01:40] And I hope you all memorized that. It's a little bit complex, but just remember, go start start, end end. So let's play with this right away. Here I have grid row start at two, grid row end at four. So it's starting at the second line. Third line, fourth line, so it's good from 2 to 4, so those are the rows that it goes through.

[00:02:06] And then it says which columns is it going through? It's starting at the second column line, and it goes to the fifth. I could do,
>> Estelle Weyl: And that's the exact same thing, right? And I could do grid column to five, and that's the same thing. Now if I wanna do just grid area,

[00:02:45]
>> Estelle Weyl: That's not what we want. We actually want two and five and that brings it back to the same thing. Because it was, it's grid, row, start, grid-column-start, grid-row-end, grid-column-end.