Adjust the Grid with Media Queries

In the previous video I added a Nav element to the container, and 0:00 changed the column tracks from two to three columns. 0:04 And I suggested that you practice using grid template areas by placing 0:07 the nav item on the grid. 0:11 Now I'll show you my solution, then I'll teach you how to use media queries 0:13 to adjust the position of grid items so they look their best at different sizes. 0:17 First, I'll assign the nav item to a named grid area. 0:21 So I'll target the nav element and assign it the grid-area: nav. 0:26 Then in the container rule, I added a third column, so we'll need to span 0:34 the header across one more column track, by writing header inside the first string. 0:39 And in the second string, or row, I'll place the nav main and aside items. 0:45 Then I'll stretch the nav item down to the first column of 0:53 the third row by writing nav as the first grid area. 0:57 And then I'll span the footer across the remaining column tracks. 1:02 Now, your grid layout may look different than mine and 1:08 that's okay, as long as you were able to place the items correctly without 1:11 displaying any unintentional spaces in the grid. 1:15 For example, you may have used one or 1:18 more dots to create an empty grid cell, and that's totally fine. 1:20 Grid template areas make adjusting your layout at different break points quick and 1:26 easy and I'll show you. 1:30 So first create the default 1 column layout for 1:31 small screens by setting grid-template-columns to just 1fr. 1:35 And then I'll place each of the named grid areas inside separate strings which, 1:41 as you learned earlier, will create a row on the grid for each item. 1:46 So, we'll place just header inside the first string, nav inside a second. 1:50 Then we'll write one for main. 1:58 Below that we'll place aside in a string and footer in the last string. 2:02 I want all rows to be as tall as the content they hold instead of setting fixed 2:10 heights, so I'm going to replace grid-template-rows with grid-auto-rows. 2:15 We're no longer declaring explicit row tracks. 2:26 So that means every row the grid creates will be an implicit row track 2:29 that will sized by this property. 2:33 Remember, grid-auto-rows gives you control over the size of implicit row tracks. 2:35 As the value, I'll use the minmax function to define 2:39 implicit rows that are no shorter than 150 pixels and 2:43 can grow to accommodate any amount of content with auto. 2:48 All right, the default layout is all set so 2:56 it should look fine on mobile devices or tablets. 2:58 Now, I'll adjust the grid for wider viewports using media queries. 3:01 At the bottom of the stylesheet, I'll create a media query that targets the grid 3:05 container when the viewport is 768 pixels or wider. 3:09 And at this break point, I'll bring back the three flexible 3:22 column tracks with grid-template-columns: 1fr 2fr and 1fr. 3:28 And I'll reposition the grid items with grid-template-areas. 3:36 So inside the first string, we'll write header header header. 3:43 And the second string let's write nav main aside. 3:52 And in the third string or row, we'll place the footer. 4:03 Let's have a look in the browser It 4:11 looks like we should also reduce the height of the header and 4:17 footer areas at this breakpoint, and we can do that with grid-template-rows. 4:20 So back in the media query, we'll add grid-template-rows. 4:24 Let's set three row tracks. 4:30 The first one to 100px, the second to minmax(150px, 4:32 auto), and the third to 100px. 4:39 Let's have a look. 4:44 Good, finally, I'll create one more media query to adjust 4:47 the grid at a min width of 992 pixels. 4:52 Inside I'll target the container. 5:01 And in this media query we're only going to use the grid-template-areas property. 5:05 All right, let's place the first row by writing header three times inside 5:15 the first string. 5:19 Inside the second string, I'll place the nav main and aside grid areas. 5:24 And finally, let's do nav, footer and footer. 5:33 All right, our responsive grid layout is good to go. 5:44