0:00 Next, we'll talk about grid-template-rows. Instead of columns, we have a property called grid-template-rows, which we use to set up the rows in a grid container. Just like with grid-template-columns, we set it on the container itself, not on the individual elements in the grid, but on the parent element.

0:17 To simplify things, I'll only work with rows or columns for now, one at a time. Although, we often work with them together. To simplify things even further, I'll go down to maybe just three boxes. I'll comment the other boxes out.

0:33 Then what I do with grid-template-rows is I set it to a space-separated list of dimensions just like with columns where each value -- let's say, I have 200 pixels, 200 pixels, and 200 pixels -- each one of these will correspond to a new row. A 200-pixel tall row, a 200-pixel tall row, and a third 200-pixel tall row. There we are.

0:56 Now, my container is 1,000 pixels tall. We have some dead space that's not being used. Let's have this middle one be a 500-pixel tall row. There we are. If I added another value in here,a 100-pixel row, we won't see anything. If I use the DevTools, however, go to the layout tab, turn on the grid overlay, there is a grid track here. Meaning that there is space there for something to fit into this grid.

1:25 We just don't have any content at the moment. If I were to add in one more box, right, if I go to four boxes instead of five, there we are. It fills in that 100-pixel row. Another thing that's important to note about grid-template-rows is, let's say, I only set two values here. Let's have a, I don't know, a 300-pixel row and another 300-pixel tall row, but I have four boxes currently.

1:52 Instead of boxes, imagine any content, four elements in there. There's only two rows in setting up. There's four elements. What happens? Instead of 300, maybe let's do 400. It will be more obvious. What happens? Here's our 400-pixel row. Here's our 400-pixel row. Then we have this extra space down here that the remaining elements tried to split.

2:13 If I did actually have 10 boxes in there, the first 2 will fill in the grid slots. They'll fill in the tracks that are 400 pixels tall, the first two rows. Then everything else will try and fit in and cram into the remaining space. There are ways to tweak this behavior. For now, with what we know, this is the behavior we get.

2:35 When we define rows with grid-template-rows, the elements that fit into those rows will take up 400 pixels and 400 pixels, in this case. Everything else will just try and take up whatever space is left.