Setting Grid Rows2:43 with Guil Hernandez
You can control how much vertical space a row takes up by defining row tracks. The
grid-template-rows property creates rows in your grid.
If we go back to index.html and add more grid items inside the grid container. 0:00 So let's copy the three items, paste them below and 0:06 change the numbers to 4, 5, and 6. 0:09 Notice how the new items start a new row, and 0:18 they line up with the items in the first row. 0:21 So they follow the three column track set and grid template columns. 0:24 And if you add more items to the grid container, 0:30 the grid will keep creating rows as needed for the content. 0:32 But we haven't explicitly defined rows in our grid yet. 0:36 So by default, the rows are as tall as the content that they hold. 0:41 But you can control how much vertical space a row takes up 0:45 by defining row tracks. 0:48 And the grid template rows property is what creates rows in your grid. 0:50 So let's go back to grid.css and 0:54 add the grid template rows property to the grid rule. 0:56 And let's first set one row track of 100 pixels. 1:03 Now, this one value sets the track-sizing for the first row. 1:07 So the top row's now 100 pixels tall 1:11 while the bottom rows still as tall as the content inside it. 1:14 And if we add a second value to the checklist of say 200 pixels. 1:18 The first row is 100 pixels tall, and the second row is now 200 pixels tall. 1:25 So now that the grid is set up, 1:30 any direct children of the container will be laid out in the grid. 1:32 So for example, adding any two elements inside the grid container, like an h2 and 1:36 a paragraph, will make each one a grid item and align them to the column tracks. 1:42 Also notice how the grid leaves an empty space for the third column track, 1:48 because there are not enough items to fill up the bottom row. 1:54 Well, even if you place some text directly inside the grid container 1:57 without wrapping it in a tag, it will still form its own grid item. 2:02 This is called an anonymous grid item. 2:06 Remember, only direct children of a grid container are treated as grid items. 2:11 This means that grid layout does not affect a content inside grid items. 2:16 But a grid item can also be a grid container. 2:22 To lay out the contents of a grid item with CSS Grid, 2:25 you set display grid on that item and define its grid tracks. 2:29 By doing that, you're essentially nesting a grid within a grid. 2:33 So coming up next, I'll show you how easy CSS Grid lets you create 2:36 separation between columns and rows. 2:40
You need to sign up for Treehouse in order to download course files.Sign up