Positioning Elements by Lines 5 exercises

Moving an Element to a New Column

The goal was to move a pink box within a CSS Grid to a specific column by using the grid-column-start property.

First, we need to determine the column line where we want the pink box to start. In this case, we want the pink box to start at Column Line 4.

To move the pink box to the desired colum

Loading solution


0:00 Let's move this pinkbox over so that it starts in this column. The property we need to use on the box itself, not on the container, don't forget that, is grid-column-start.

0:14 Right now it starts at line one. Column line one, this is two, three, and then four, which is where I want it to go. I want it to start at line four, put the colon in there, and there it goes, right to the correct spot. Remember, we start counting at one.

0:30 Sometimes I see people start counting at zero, coming from programming languages like JavaScript or Python, where you count indexes in an array or a string at zero, but the column and row lines, they start counting at one. If I go back to one, go to two, let's go to five, let's go to four. All right.