0:00 Like with so much of CSS, we also have a shorthand property we can use to set grid-row-start and grid-row-end, and also another shorthand to set column-start and column-end. I'm going to go back to only having a single box in here, just to make it a little bit easier. We'll just keep our red box.

0:20 Of course, by default, it starts in that top left grid track. If I want to move it over to this top right grid track, what I can do is use grid-column-start or grid-column-end. Either one could work. I'll do grid-column-end just to show. If I set it to end at four, this is line four. It's ending there. I also could have told it to start at three.

0:48 If I wanted to span from two to four -- we've already seen this -- I can set grid-column-start to be two. There we are. Now, this is not using the shorthand property. The shorthand property is just called grid-column. Grid-column takes one or two values. I'll show it with two values to start. Two, and then we use a forward slash followed by four.

1:15 This is the start line. This is the end line. We have the same result. If I change this to go from one to four, this is what we see. It spans those three grid tracks, starting at line one for the column, ending at column line four. That's how we can use this shorthand. There's also the option to only specify a single value, like two, in which case, this is the start line.

1:42 It starts at line two. This is column line one. This is line two. We have the same shorthand for row. If I want to have it go from this row line, which is row two, all the way down to row four, I can simply rewrite it as grid row. Then we have two forward slash four, start at row two, end at line four. That's what we get.

2:10 To summarize, this shorthand here is equivalent to what we see right here. Then the same goes for grid-column, we have grid-column-start and grid-column-end or the shorthand of just grid-column.