Placing Elements Using Grid Template Areas8:05 with Guil Hernandez
CSS Grid provides a feature that lets you create named grid areas, then you use those names to position items on the grid. First, you'll use the
grid-area property to assign a custom name to each grid area. Then you'll use the
grid-template-areas property to define how the layout looks, by referencing those custom named areas.
Grid areas are the slots on the grid where grid items are placed. 0:00 One of the ways grid areas get created is when you place an item using line 0:04 based placement, for instance, 0:08 the layout we created in the previous video is made up of four grid areas. 0:10 The header, main, aside, and footer areas. 0:14 A grid area is always enclosed by four grid lines, one on each side. 0:17 For instance, the header's grid area consists of the space between the first 0:21 and second row grid lines and the first and third column lines. 0:26 And the aside's grid area is bound by row lines two and 0:31 five and column lines two and three. 0:35 You've learned how to position items against grid lines 0:38 using line based placement. 0:41 Well, CSS grid provides a delightful feature that let's 0:43 you create named grid areas. 0:47 Then you can use those names to position items on the grid. 0:49 So in this video, we're going to have some fun laying out the header, main, aside, 0:53 and footer items using grid template areas. 0:57 First, we're going to use the grid-area property 1:00 to assign a custom name to each of the four grid areas. 1:04 Then we'll use the grid-template-areas property 1:08 to define how our layout looks by referencing those custom named areas. 1:11 To start, I'll delete the line placement properties, from the header, main, aside, 1:16 and footer rule, but 1:21 you can just comment them out if you want to use them as reference for later. 1:22 Now, we're going to give each selector a grid area name. 1:27 We'll start with a header, so let's add the grid-area-property 1:30 inside the header rule, and assign it the name header. 1:34 And you can give a grid area any name you want, for example, 1:38 head, hd, or just the letter h. 1:42 I'm choosing to identify the area with the name header. 1:45 Next, I'll give the main element a grid-area value of main. 1:48 Then set aside's grid-area value to aside. 1:55 And we'll give the footer a grid-area value of footer. 2:01 Now, the grid-area property is just a shorthand property for 2:06 setting a grid item's size and location within the grid. 2:10 So it could do a whole lot more than just assign names to grid-areas, but 2:13 that's what we're using it for in this video. 2:16 I've also posted resources about the grid-area-property in the teacher's notes. 2:18 Up in the grid container rule, we'll keep the same two column tracks, 2:22 but let's set the row tracks back to three rows by removing the fourth row track, 2:28 set to 100 pixels. 2:33 And next, right here in the container rule, 2:35 we'll use the grid-template-areas property to place the header, main, aside, 2:38 and footer items onto the grid by referencing their named grid-areas. 2:45 This is the fun part. 2:51 You see, by assigning a name to each grid item, 2:52 we've defined a set of individual and reusable grid-template-areas 2:56 we can place on the grid via the grid-template-areas property. 3:01 The value for grid-template-areas should be a set of strings. 3:06 And each separate string creates a row on the grid. 3:10 We need three rows, so let's first create three empty strings. 3:13 And I like to place each string on its own line to make the code more readable, 3:19 and you'll see how it's going to help you visualize the structure of your grid. 3:24 Inside the strings, you reference your grid-area names, and grid-template-areas 3:30 will place items on the grid based on where you write the names. 3:35 So in other words, 3:39 how you write them is going to be how they appear in the browser. 3:39 So let's start with the first string which represents the first row on the grid, 3:43 and we're going to place the header inside the first row 3:49 by writing the header grid-area name. 3:52 And our grid has two column tracks, so we'll span the header across both tracks, 3:55 from one edge of the grid to the other, by writing header two times. 4:01 In the next string, or row, we'll place the main item 4:06 inside the first column track by writing its named grid-area, main. 4:11 Then, we'll place the aside in the second column. 4:15 And finally, the footer will span the entire third row. 4:19 So just like the header, let's write the footer grid-area twice. 4:22 So to recap, each separate string creates a row. 4:28 And a column is created for each word or grid-area name in the string. 4:33 And make sure that you include a space between each grid-area name, 4:39 otherwise, the browser will not recognize the grid-areas. 4:43 Let's have a look in the browser. 4:48 And just like that we've created our site layout using grid-template-areas. 4:50 And what's really neat is that the Firefox Grid Inspector 4:55 can display the area names in the grid overlay. 4:58 So I'm still here using Firefox nightly, and 5:01 in the Grid panel under Grid Display Settings, 5:04 check Display area names, and it will show you the names of each grid-area. 5:07 As you can see, it resembles exactly what we've written as the value for 5:13 grid-template-areas. 5:17 And this is what I meant earlier when I mentioned that placing each string on its 5:18 own line gives you a precise visualization of the structure of your grid. 5:23 So as you can see, this is a fun and 5:28 useful way to prototype layouts with grid because you can easily and 5:29 quickly move items around to see where they might fit best. 5:33 For instance, 5:36 you can quickly swap the placement of columns like the main and aside items. 5:37 Or you can make a grid-area take up multiple 5:47 spaces by simply repeating its name. 5:50 For example, I'll replace the second footer name with aside 5:54 And the aside now takes up part of the third row, and 6:02 we can quickly test how it looks when the main item takes up a larger 6:06 area of the grid, so I'll set the third string to main and footer. 6:11 You can also leave empty spaces or empty grid cells using a period or 6:19 the full stop character. 6:22 For example, to display the footer below just the aside and 6:24 leave an empty space below the main content area, 6:28 replace the main area and the third string with a period. 6:31 Or you can display the footer below the main content and 6:39 leave an empty cell below the aside. 6:42 You're able to use one or any number of dots to represent an empty grid cell, 6:51 for example, three as long as there are no spaces between them. 6:57 Developers often refer to this as the ASCII method of grid layout. 7:06 Because it resembles the ASCII design technique where you form pictures or 7:11 art out of special ASCII characters. 7:16 So I suggest experimenting with grid-template-areas 7:18 to see how quickly you're able to create different layout combinations. 7:21 They're not only useful, but also fun to use. 7:26 In fact, I'll create a grid-template-areas practice challenge for you now. 7:29 In the index.html file, let's add a new item to the grid container. 7:33 So I'll include a nav element below the header. 7:39 Then in the grid container rule, add a third column track. 7:46 So I'll write 1fr as the first track. 7:50 And I'll leave it up to you to place the new item on the grid using grid-area and 7:54 grid-template-areas. 7:58 I'll show you my solution in the next video. 8:00
You need to sign up for Treehouse in order to download course files.Sign up