0:00 We saw how to take a simple grid and make it responsive using media queries by adjusting the number of columns and rows. We can also do the same thing for more complex grids created with grid template areas.

0:11 Like this grid here...We made this a while ago just to show how grid template areas works. If I want to completely reorder, reorganize, reshape this grid at a different screen size, I can do that by simply reassigning grid template areas.

0:26 I'm going to show some drastic changes that aren't necessarily...They don't make a lot of sense, but they'll be visually obvious that we're reorganizing the grid, which is all that I care about for now.

0:37 Normally, as the screen gets smaller, you'll probably go to fewer columns and more rows. In this example, I'll do something drastic and have A jump down to the bottom. For example, this red box will go to the bottom. Maybe it's a banner or something that's not that important on a small screen size.

0:56 All I need to do is write a media query. I'm doing a thousand pixels and below where I'm going to assign grid template areas on the container. I'm just updating it. I'll update it to have A go down to the bottom, as a simple example. It's already happened, as you can see there.

1:16 This is A. Right now, this red box is assigned to that area A. We shrink it down and now it's assigned down here. It's still A, but A is now in a different location in the grid.

1:28 I can also not just move a column around or a row around like I did here, but I can also change the size of them, how many tracks they take up. I could even add in a new row. If we shrink this down here...I could have this pink box here, which is currently the H area. I could have that go onto its own line, for example, and then have this teal one take up this extra space.

1:56 The easy option is to get rid of that pink thing in general. H is gone now, and now G spans three columns. You can see it happens right here. Watch the pink box. It goes away.

2:09 We're still only dealing with a four column grid and a four row grid. If I wanted to reintroduce the H area and have it come, let's say, below, we'll have H be a full four column row here.

2:25 It works, but then we lose what we had afterwards, which is our red box. That's because I've now added five rows, right? One, two, three, four, five, but the grid itself is still only four rows. I could adjust that. I could say, all right, on this screen size, we now want five rows that are one fraction each.

2:48 Now watch the pink box. It takes up a whole row. The teal box grows to take over that space. I'm not saying these are very smart changes to make, as far as a real responsive layout, but it's visually obvious that we're making changes.

3:05 It's not always a matter of changing the rows and columns. Sometimes you reorder, you resize elements if you're using grid template areas by reassigning grid template areas at a given screen size.