0:00 Next up, we have another exercise involving positioning elements within a grid. We have the same five-by-five grid that we've been working with. Now, instead of just a single pink box, we have a pink box, a purple box, and a blue box.

0:13 What I'd like you to do is recreate this layout. You'll want to look at the screenshot or pause the video so that you can see exactly where these elements go and how big they are. Specifically, I want you to do it using the grid-row and grid-column shorthand. Instead of doing things like grid-row-start, grid-row-end, I want you to use grid-row and grid-column.

0:38 In the HTML file, there's nothing for you to touch. In the CSS file, I've set up the grid for you already. Five by five, as you can see right here. There's no need to touch anything except for the individual boxes. The pink box, style the pink box right there. For the purple box, write your code there. For the blue box, write your code here.

0:58 Take a look at the end result. This is what we're starting with, but this is what I'd like to end with. I'll be back with the solution.