1 00:00:04,566 --> 00:00:05,959 Hey everyone, Guil here, 2 00:00:05,959 --> 00:00:10,150 it's time to sharpen your grid layout skills by practicing grid template areas. 3 00:00:10,150 --> 00:00:14,236 A feature of grid that lets you assign named grid areas to grid items, 4 00:00:14,236 --> 00:00:17,698 then you use those names to position the items on the grid. 5 00:00:17,698 --> 00:00:22,660 This exercise is a follow up to the third stage of my CSS grid layout course. 6 00:00:22,660 --> 00:00:25,800 So if you haven't taken that yet, I suggest you finish the course before 7 00:00:25,800 --> 00:00:29,810 trying this challenge, I've also added the link to the course in the teacher's note. 8 00:00:29,810 --> 00:00:34,250 So you're going to layout this web page using grid template areas, and 9 00:00:34,250 --> 00:00:37,550 to get started, launch the workspace with this video. 10 00:00:37,550 --> 00:00:41,095 I've included HTML and CSS files for this exercise, 11 00:00:41,095 --> 00:00:46,160 index.html contains a div with the class grid. 12 00:00:46,160 --> 00:00:50,100 Inside grid are seven elements, such as a header, 13 00:00:50,100 --> 00:00:54,876 main, footer, and divs, with classes like about, news, and links. 14 00:00:54,876 --> 00:00:59,400 The file page.css contains the basic styles for the page, 15 00:00:59,400 --> 00:01:04,209 which you can see when you preview index.html in the browser. 16 00:01:04,209 --> 00:01:09,177 You are going to write your CSS inside the file layout.css, so 17 00:01:09,177 --> 00:01:14,908 now let's work through what you'll need to do here in the layout.css. 18 00:01:14,908 --> 00:01:18,295 You'll see five comments with instructions about the css selectors and 19 00:01:18,295 --> 00:01:19,750 styles you'll need to write. 20 00:01:20,760 --> 00:01:27,630 First you'll need to target each grid item and assign it a grid area name. 21 00:01:27,630 --> 00:01:32,750 Remember, grid areas are the slots on the grid where grid items get placed, and 22 00:01:32,750 --> 00:01:34,850 you can give a grid area any name you want. 23 00:01:35,850 --> 00:01:38,820 Then down in the grid container rule, 24 00:01:38,820 --> 00:01:44,920 you'll begin building the grid by setting just the top row track to 100 pixels. 25 00:01:44,920 --> 00:01:49,330 Below that, you'll declare three flexible column tracks, 26 00:01:49,330 --> 00:01:53,750 the first track should take up two fractions of the available space. 27 00:01:53,750 --> 00:01:59,230 And the second and third tracks should take up one fraction of the space. 28 00:01:59,230 --> 00:02:03,954 Then you'll apply a ten pixel gutter between rows and columns. 29 00:02:03,954 --> 00:02:08,953 Finally, you'll place the items on the grid using the grid area names 30 00:02:08,953 --> 00:02:10,314 assigned to them. 31 00:02:10,314 --> 00:02:14,171 Now you should use the image gridtemplateareas.png, 32 00:02:14,171 --> 00:02:17,215 located in the workspace, as a reference. 33 00:02:17,215 --> 00:02:21,466 So the goal is to get your layout to look like this, 34 00:02:21,466 --> 00:02:26,440 first, you'll stretch the header across the first row. 35 00:02:26,440 --> 00:02:30,734 Then stretch the main element from the second row track down to 36 00:02:30,734 --> 00:02:32,870 the bottom row track. 37 00:02:32,870 --> 00:02:38,383 Then place the About, News, Links, and Ads items on the second and 38 00:02:38,383 --> 00:02:44,021 third column tracks and the second and third row tracks, like this. 39 00:02:44,021 --> 00:02:50,100 And the footer should take up the second and third column tracks of the bottom row. 40 00:02:50,100 --> 00:02:54,470 And while you're creating your grid, feel free to use the handy Firefox grid 41 00:02:54,470 --> 00:02:57,620 inspector to help you place the items on the grid. 42 00:02:57,620 --> 00:03:00,560 This exercise is a great way to practice what you've learned so 43 00:03:00,560 --> 00:03:02,570 far about grid template areas. 44 00:03:02,570 --> 00:03:06,020 Good luck, have fun, and in the next video I'll walk you through one solution.