Introducing the Practice3:06 with Guil Hernandez
See an overview of the grid you'll create.
Hey everyone, Guil here, 0:04 it's time to sharpen your grid layout skills by practicing grid template areas. 0:05 A feature of grid that lets you assign named grid areas to grid items, 0:10 then you use those names to position the items on the grid. 0:14 This exercise is a follow up to the third stage of my CSS grid layout course. 0:17 So if you haven't taken that yet, I suggest you finish the course before 0:22 trying this challenge, I've also added the link to the course in the teacher's note. 0:25 So you're going to layout this web page using grid template areas, and 0:29 to get started, launch the workspace with this video. 0:34 I've included HTML and CSS files for this exercise, 0:37 index.html contains a div with the class grid. 0:41 Inside grid are seven elements, such as a header, 0:46 main, footer, and divs, with classes like about, news, and links. 0:50 The file page.css contains the basic styles for the page, 0:54 which you can see when you preview index.html in the browser. 0:59 You are going to write your CSS inside the file layout.css, so 1:04 now let's work through what you'll need to do here in the layout.css. 1:09 You'll see five comments with instructions about the css selectors and 1:14 styles you'll need to write. 1:18 First you'll need to target each grid item and assign it a grid area name. 1:20 Remember, grid areas are the slots on the grid where grid items get placed, and 1:27 you can give a grid area any name you want. 1:32 Then down in the grid container rule, 1:35 you'll begin building the grid by setting just the top row track to 100 pixels. 1:38 Below that, you'll declare three flexible column tracks, 1:44 the first track should take up two fractions of the available space. 1:49 And the second and third tracks should take up one fraction of the space. 1:53 Then you'll apply a ten pixel gutter between rows and columns. 1:59 Finally, you'll place the items on the grid using the grid area names 2:03 assigned to them. 2:08 Now you should use the image gridtemplateareas.png, 2:10 located in the workspace, as a reference. 2:14 So the goal is to get your layout to look like this, 2:17 first, you'll stretch the header across the first row. 2:21 Then stretch the main element from the second row track down to 2:26 the bottom row track. 2:30 Then place the About, News, Links, and Ads items on the second and 2:32 third column tracks and the second and third row tracks, like this. 2:38 And the footer should take up the second and third column tracks of the bottom row. 2:44 And while you're creating your grid, feel free to use the handy Firefox grid 2:50 inspector to help you place the items on the grid. 2:54 This exercise is a great way to practice what you've learned so 2:57 far about grid template areas. 3:00 Good luck, have fun, and in the next video I'll walk you through one solution. 3:02
You need to sign up for Treehouse in order to download course files.Sign up