Positioning Elements by Lines 5 exercises

Positioning with grid-column-start and grid-row-start

Here's the target for this challenge:

start line screenshot

We want to move the box over

Loading solution


0:00 OK, so let's move the pink box over. Let's start with the column direction. It's moved one column over, meaning that its column start line is no longer one, but it now starts on column line two. Let's set grid-column-start to be 2, and that moves it over to the right column.

0:21 Now we need to move it to the right row. This is row one, this is row two, and this is row line three. We want to move it down using grid-row-start of 3, and that's it. It's in the correct spot.