0:00 Let's begin. Why don't we just go top to bottom? We'll start with the header. I know I want the header to start at row one, column one. I want it to span across, in this case, five different columns.

0:13 I'll start with the header here. Let's go look at our version. I'll use the grid-column and grid-row shorthand. For grid column, I'll have it start at line 1, and I'll span 5. That's pretty much all I need.

0:28 If I want to be super specific, make sure it never moves, like if something else was inserted above it, just so you know what I'm talking about, if this nav was above it. Now it's in the wrong row. If I always want it to be rooted to the top, let me undo that. I could specify the grid-row should go from 1 to 2. Oops. Nothing looks different, but now it will always stay there.

0:56 Next, let's work on the nav on the left side. It only spans one column, but it spans three rows. Let's start with the nav. I wanted to begin at this row where it already is. Again, I'm going to be specific.

1:12 Grid-row will start at line 2. This is line one. This is line two. Then I'll use the span keyword because I like using span. It will span one, two, three. I could also use this line number down here if I wanted instead, which is line number five, right? One, two, three, four, five. Same result at the end of the day, but I like to use span.

1:36 Then I'm going to do the same thing where I set the grid-column, even though it's already where I want it to be. I just want to make sure it's always there. It starts at line 1 and it goes to column line 2 and it looks no different. All right.

1:51 Next, we have our main article here. This one is going to span three different columns. Let's start there. This is column line 2. This is one, that's two. It spans 3. For grid column on the article, I'll have it start at line 2, right here, one, two. Then I'm going to have it span 3.

2:14 Then in the row direction, I'm going to have it start where it currently is, which is row line one, two. I'm going to have it span two rows. As you can see, that's correct.

2:29 Then we move on to the ads. Ads is supposed to take up these two cells, those two tracks next to the article. We can begin with the column direction, although it's already in the right spot column-wise. I want it to begin at this line, which is one, two, three, four, five. I want it to end at six, nothing different. In the row direction, I want it to start where it is, line one, two, and I want it to span 2. All right.

3:00 Then we move on to the footer, which should take up all this, the space that's left, four tracks. Again, I'm not going to just say span 4. I'm going to be more specific so that it always stays in the right spot. For my footer, we'll start with the column direction. It starts at column line 2, and it spans 4 tracks.

3:21 Even though that's good enough, I'm going to be specific and say grid-row. I want it to start at this line, which is one, two, three, four, and end at the next line, which is five.

3:36 There's many ways of accomplishing this. You can even make it shorter using the grid-area shorthand, although I've already discussed how I find that a little bit confusing personally. I prefer to do columns and rows separately, but that's just a personal choice. That's our simple-ish page layout exercise.