0:00 There's yet another way to position an element using the row lines. There's a property called grid area. This property can take four values to set the starting row line, the starting column line, the ending row line, and the ending column line. Now I find it a little bit dense. The syntax looks like this. Four numbers separated by slashes.

0:23 The reason I tend to avoid it is I just have a hard time remembering the order here. You might think, "OK, these are both the row values and these are the column values." That's not how it works. This is the row start. This is the column start. This is the row end. This is the column end.

0:41 In the row direction, we go from line one to line three. Let's see. There we are. Here's line one down to three right here. In the column direction, we go from line two to line four. Two is right here, over to four. That works fine. It's just a little dense, as I said. You're free to use it, of course. A lot of people do. You just have to remember it's row start, column start, row end, column end.

1:10 Let's do one more example. Why don't we make our grid a little bit bigger? Let's create a five-by-five grid now. I'd like to move this box. How about these three grid tracks right here? This one, this one, and this one. I'm going to use the shorthand. We have to start with the row direction.

1:36 We want it to start on this row, which is...What's the number here? One, two, three. I want it to span until four, five, six. I want to start at three and end at row line six. Then in the column direction, I want it to start here, so this is four. One, two, three, four. I only want it to span a single column. That's fine. I'll just say four to five. Four and end at five. There we are.

2:12 We could, instead, rewrite this as grid column and grid row. For grid column, we would go from four to five. For grid row, we would go from three to six. It's unchanged.