1 00:00:00,430 --> 00:00:04,210 In the previous video I added a Nav element to the container, and 2 00:00:04,210 --> 00:00:07,364 changed the column tracks from two to three columns. 3 00:00:07,364 --> 00:00:11,323 And I suggested that you practice using grid template areas by placing 4 00:00:11,323 --> 00:00:13,320 the nav item on the grid. 5 00:00:13,320 --> 00:00:17,170 Now I'll show you my solution, then I'll teach you how to use media queries 6 00:00:17,170 --> 00:00:21,260 to adjust the position of grid items so they look their best at different sizes. 7 00:00:21,260 --> 00:00:26,450 First, I'll assign the nav item to a named grid area. 8 00:00:26,450 --> 00:00:31,230 So I'll target the nav element and assign it the grid-area: nav. 9 00:00:34,170 --> 00:00:39,475 Then in the container rule, I added a third column, so we'll need to span 10 00:00:39,475 --> 00:00:45,653 the header across one more column track, by writing header inside the first string. 11 00:00:45,653 --> 00:00:53,070 And in the second string, or row, I'll place the nav main and aside items. 12 00:00:53,070 --> 00:00:57,878 Then I'll stretch the nav item down to the first column of 13 00:00:57,878 --> 00:01:02,197 the third row by writing nav as the first grid area. 14 00:01:02,197 --> 00:01:05,620 And then I'll span the footer across the remaining column tracks. 15 00:01:08,809 --> 00:01:11,583 Now, your grid layout may look different than mine and 16 00:01:11,583 --> 00:01:15,383 that's okay, as long as you were able to place the items correctly without 17 00:01:15,383 --> 00:01:18,350 displaying any unintentional spaces in the grid. 18 00:01:18,350 --> 00:01:20,740 For example, you may have used one or 19 00:01:20,740 --> 00:01:24,890 more dots to create an empty grid cell, and that's totally fine. 20 00:01:26,095 --> 00:01:30,280 Grid template areas make adjusting your layout at different break points quick and 21 00:01:30,280 --> 00:01:31,780 easy and I'll show you. 22 00:01:31,780 --> 00:01:35,300 So first create the default 1 column layout for 23 00:01:35,300 --> 00:01:41,370 small screens by setting grid-template-columns to just 1fr. 24 00:01:41,370 --> 00:01:46,510 And then I'll place each of the named grid areas inside separate strings which, 25 00:01:46,510 --> 00:01:50,810 as you learned earlier, will create a row on the grid for each item. 26 00:01:50,810 --> 00:01:56,273 So, we'll place just header inside the first string, nav inside a second. 27 00:01:58,348 --> 00:02:02,792 Then we'll write one for main. 28 00:02:02,792 --> 00:02:08,765 Below that we'll place aside in a string and footer in the last string. 29 00:02:10,075 --> 00:02:15,235 I want all rows to be as tall as the content they hold instead of setting fixed 30 00:02:15,235 --> 00:02:23,694 heights, so I'm going to replace grid-template-rows with grid-auto-rows. 31 00:02:26,007 --> 00:02:29,170 We're no longer declaring explicit row tracks. 32 00:02:29,170 --> 00:02:33,090 So that means every row the grid creates will be an implicit row track 33 00:02:33,090 --> 00:02:35,330 that will sized by this property. 34 00:02:35,330 --> 00:02:39,866 Remember, grid-auto-rows gives you control over the size of implicit row tracks. 35 00:02:39,866 --> 00:02:43,876 As the value, I'll use the minmax function to define 36 00:02:43,876 --> 00:02:48,063 implicit rows that are no shorter than 150 pixels and 37 00:02:48,063 --> 00:02:52,360 can grow to accommodate any amount of content with auto. 38 00:02:56,052 --> 00:02:58,437 All right, the default layout is all set so 39 00:02:58,437 --> 00:03:01,750 it should look fine on mobile devices or tablets. 40 00:03:01,750 --> 00:03:05,870 Now, I'll adjust the grid for wider viewports using media queries. 41 00:03:05,870 --> 00:03:09,850 At the bottom of the stylesheet, I'll create a media query that targets the grid 42 00:03:09,850 --> 00:03:15,180 container when the viewport is 768 pixels or wider. 43 00:03:22,479 --> 00:03:28,353 And at this break point, I'll bring back the three flexible 44 00:03:28,353 --> 00:03:35,050 column tracks with grid-template-columns: 1fr 2fr and 1fr. 45 00:03:36,090 --> 00:03:39,870 And I'll reposition the grid items with grid-template-areas. 46 00:03:43,873 --> 00:03:49,313 So inside the first string, we'll write header header header. 47 00:03:52,830 --> 00:03:59,896 And the second string let's write nav main aside. 48 00:04:03,117 --> 00:04:06,930 And in the third string or row, we'll place the footer. 49 00:04:11,486 --> 00:04:17,451 Let's have a look in the browser. It 50 00:04:17,451 --> 00:04:20,605 looks like we should also reduce the height of the header and 51 00:04:20,605 --> 00:04:24,971 footer areas at this breakpoint, and we can do that with grid-template-rows. 52 00:04:24,971 --> 00:04:28,525 So back in the media query, we'll add grid-template-rows. 53 00:04:30,989 --> 00:04:32,800 Let's set three row tracks. 54 00:04:32,800 --> 00:04:39,952 The first one to 100px, the second to minmax(150px, 55 00:04:39,952 --> 00:04:44,226 auto), and the third to 100px. 56 00:04:44,226 --> 00:04:44,829 Let's have a look. 57 00:04:47,639 --> 00:04:52,624 Good, finally, I'll create one more media query to adjust 58 00:04:52,624 --> 00:04:55,955 the grid at a min width of 992 pixels. 59 00:05:01,351 --> 00:05:03,530 Inside I'll target the container. 60 00:05:05,581 --> 00:05:11,293 And in this media query we're only going to use the grid-template-areas property. 61 00:05:15,910 --> 00:05:19,730 All right, let's place the first row by writing header three times inside 62 00:05:19,730 --> 00:05:20,710 the first string. 63 00:05:24,338 --> 00:05:31,225 Inside the second string, I'll place the nav main and aside grid areas. 64 00:05:33,872 --> 00:05:38,280 And finally, let's do nav, footer and footer. 65 00:05:44,850 --> 00:05:47,668 All right, our responsive grid layout is good to go.