Positioning Elements by Lines 5 exercises

Positioning with Shorthand

As a reminder, here's the layout we're trying to create:

![screenshot demo](https://res.cloudinary.com/dwppkb069/image/upload/v1684523222/tutorials/images-17.2_Exercise11_Solution.mp4/172_exercise11_solution_2_00-10200-so-this-is-row-line-1-we-need-to-push-it-down-so-it-starts-on-row-line-2_nnge0w.

Loading solution


0:00 Let's start with the pink box. Let's work with the row direction first this time. This is row line one. We need to push it down, so it starts on row line two.

0:11 Pink box, we'll set grid-row. Remember, I'm not going to do grid-row-start and end. I'm using the shorthand grid-row. I want it to start on line two, and then a /, and I want it to end, this is one, two. I want it to end on four, one, two, three, four. Let's take a look at our version. That looks good.

0:32 Now, in the column direction, I want it to start on the same column line one, but I want it to end, one, two, three on column three, grid-column: 1 / 3. There we are. I like to put spaces there, if the browser doesn't really care. We go from column line one, two over to three. That's the pink box done.

0:54 Next, let's do the purple box. The purple box in the row direction starts on row line one, two, three, four. We'll use grid-row. We'll start on line four and then it ends on line five. It only spans one cell. I could actually just leave it as grid-row: 4 and that will move it to the right spot.

1:18 However, if I want to be explicit, I could say, it goes from four to five. That's the default. It goes from four to five. It only spans one track, if I don't specify otherwise.

1:28 Now, in the column direction, we want it to start on line one, two, grid-column, start on two and then we want it to end two, three, four, five. Just like that. Let's see. That looks good.

1:48 Finally, we have the blue box. In the column direction...Let's do row first. We've been consistent there. We start on row line one. With our blue box, grid-row, we'll start on one, but it ends on one, two, three, four.

2:07 Then in the column direction, it's already in the right spot, but we can just tell it specifically. In case the grid changes at some point, we want you to definitely start at column line one, two, three, which is where it already is.

2:22 If I only want to specify the start, I can just do a single number. I don't have to do 3 / 4. Although, that works too. I'll leave it as three just so you can see some variety. That's it for this exercise.