0:00 Next, we're going to talk about something called the implicit grid, which is basically everything that is outside of the explicit grid that we set up. For example, if I set up an explicit grid in my container where I have, let's say, two evenly sized columns, 1fr, 1fr. Then I only define a single row, grid-template-rows. Let's do a height of pixels, 300 pixels.

0:34 Right now, I have way too many elements in here, right? I technically only have space in my grid for two elements. This is my whole grid. I defined it as two columns, evenly sized, one fraction each, one row, 300 pixels tall. If I turn on the DevTools, that's our grid right there.

0:54 If I turn off this extend grid lines...and I'll actually comment out our boxes as well. That's our grid, just this little bit. What happens if I add too many elements in? Anything more than two, where are the boxes going to go and how big will they be? Let's see what happens.

1:17 Instead of two boxes, I now have four boxes, although the grid only has space for two. The first two fill the grid, the actual explicit grid. Then the other two overflow. They still follow the shape of the columns, but now these additional third and fourth boxes grow as tall as they can to fill the space.

1:40 If I have all 10 boxes in here, the same behavior happens, where we have the first two filling the explicit grid that we defined. Remember, the grid we defined is only up here. This is all empty space and our boxes fill it, but they're not 300 pixels tall. They're not following the grid-template-rows. That's just one row that we defined.

2:03 That extra space is evenly divided between these remaining boxes. If I want, I can give them an explicit height. Anytime an element is added into this grid that is not part of the explicitly defined grid, it's outside of it, it's part of the implicit grid. We can give it a height of 200 pixels or 100 pixels, or whatever we want. We don't even have to use pixels.

2:26 I think it will be easiest if I actually slim down the number here. Let's go back to just four boxes. Here's our first two in the 300-pixel explicitly laid-out row that we decided on. Then the next two just fill all that extra space. Maybe I want them to be the same size. I want them also to be 300 pixels. This is where I use the property grid-auto-rows.

2:52 This says that any implicitly created rows should have a height of 300 pixels, the same as the initial row that we set up. Now any additional rows, if there are any, will be 300 pixels tall. Let's try one more. Let's go to six boxes. You can see that they are each 300 pixels. Each row is 200 pixels tall. That's grid-auto-rows.

3:20 Let's try a different value here just so you can see that happening. Let's set my initial row to be 400 pixels, just a single row. Anything after that will be 100 pixels, anything added implicitly. There we are.