Positioning Elements by Lines 5 exercises

Practice Moving and Spanning Grid Items

In this exercise, we will be working with a 5x5 grid and a single pink box:


Loading exercise


0:00 Next, we've got another exercise with our good friend, the pink box. We still have this five-by-five grid I've already pre-set up for you. You don't need to touch anything in the grid container as you can see here. All that I'd like you to do is move the pink box around and change how many columns and rows it spans so that it looks like this.

0:20 I'll leave the video on this frame so you can pause and look at this. It's moved over a couple of columns. It's moved down a row. It also spans across multiple rows and multiple columns. This is what we start with. This is what I'd like you to end with. You don't need to touch the HTML file. There's nothing here for you.

0:39 Just style the pink box div itself. Move it up. Move it down. Move it right and left. Make it fatter, skinnier, taller, whatever you need to do to match what you see right there from this starting state.