The Solution5:16 with Guil Hernandez
Follow along to see how to lay out the web page using CSS Grid layout.
How'd it go? 0:00 Were you able to create your grid layout using grid template areas? 0:01 If not, that's okay, you can watch the solution, compare it to what you wrote, 0:04 and then try to recreate it yourself. 0:07 The goal was to get your layout to look like this 0:09 using the image grid-template-areas.png as a reference. 0:12 Now I'll show you how I created the layout. 0:17 You can also reference my code when you download the project files. 0:19 First, I'll need to target each grid item and 0:22 assign a custom name to each of the grid areas. 0:26 In index.html, I see that there are seven items inside the grid container, 0:30 so I'll start with the header. 0:35 In layout.css, I'll target header and assign it the grid-area, head. 0:38 Then I'll target the main element and 0:50 give it the grid-area name, main. 0:54 Then I'll target the class about and 1:02 set its grid-area to about. 1:06 Below that target news and 1:10 assign it the grid-area news, 1:14 then links will have the grid-area name links. 1:20 And just a couple more, ads, Will be named ads. 1:30 And finally, I'll give the footer a grid-area of foot. 1:39 You probably named your grid areas differently, and that's okay. 1:48 These are just the names I'm using. 1:51 Now in my grid container rule, I'll begin building my 1:54 grid by setting just the top row track to 100 pixels. 1:59 I'll add grid-template-rows 100 pixels. 2:05 So one value declares one row track only. 2:11 It's going to set the height of the top most row or the header. 2:15 And since I set the height to 100vh, all remaining rows will 2:20 stretch to evenly fill the available vertical space. 2:25 Next, I'll declare 3 flexible column tracks using grid template columns. 2:29 The first track should take up 2 fractions of the available space, so 2:38 I'll set the first value to 2fr. 2:42 And the second and third tracks should take one fraction of the space. 2:45 So I´ll set the second and third values to 1fr. 2:50 To apply 10 pixel gutter between rows and columns, I´ll use the grid-gap, 2:54 shorthand property, and set the value to 10 pixels. 3:01 Finally, the fun part, 3:07 placing the items on the grid using the grid area names I assigned. 3:09 You use the grid-template-areas property 3:15 to place the items onto the grid using their named grid areas. 3:18 The value for grid template areas should be a set of strings. 3:24 Remember, each separate string creates a row on the grid. 3:28 In grid-template-areas.png, I see that I need to set four rows. 3:33 So, I'll add four sets of strings as the value for 3:41 grid-template-areas and place each on it's own line. 3:45 So now, to stretch the header across the first row, like this, 3:56 I'll write the head grid area name three times inside the first string. 4:01 I'm writing it three times because I set three column tracks. 4:09 Then, to place the main element on the first column and 4:13 stretch it from the second row track to the bottom row track, I'll place main 4:18 first in the second, third, and fourth strings, or rows. 4:25 Next, I'll place the about and news items inside 4:33 the second and third columns of the second row. 4:38 And the links and ads items inside the second and 4:44 third column tracks of the third row. 4:49 Finally, I'll place the footer inside the second and 4:51 third columns of the bottom row by writing the foot grid area name twice. 4:54 All right, let's have a look in the browser. 5:00 The grid layout is all set. 5:03 I hope you were able to complete this grid practice session successfully. 5:05 If not, why not start over and try to write the grid properties and 5:09 values without looking at my version. 5:12 Thanks everyone, and happy coding. 5:14
You need to sign up for Treehouse in order to download course files.Sign up