0:00 Let's get to work on the solution for this exercise, which right now, you can't even really tell that new boxes are being added in when I click. Why don't we start by defining a grid with three columns like you see in the solution.

0:14 All we need to do is style the grid container, everything is inside of this container, as you can see right there, except the button, but that's irrelevant. I'm going to turn it into a grid container, display: grid. Then I'm going to define three equally-sized columns, grid-template-columns. Hopefully, this is review. I'll use repeat to make three, one fraction columns.

0:38 Now, if I add a new box...It's getting there. Why don't we add the gaps in, so we can see our boxes. The gaps are supposed to be 10 pixels between each box or between each row and column rather. In both directions, 10 pixels.

0:56 You can see it made me three very tall boxes. The first three times I clicked. Then I click again and now we have two rows that are sharing the space of the container. Now, three rows that are sharing the space and they keep shrinking, which is not the behavior I want. I want all of these rows to be 100 pixels, as it says right here.

1:19 The wrong way of doing this is grid-template-rows: 100px, because that defines me a hard-coded number of rows, one row of 100 pixels. Then in the next row, it's not 100 pixels.

1:31 Again, I wanted you to avoid something like this, where you're hard-coding three rows, because that might work the first couple of times we click, but then it fails.

1:40 Instead, we need to use grid-auto-rows, the property we just learned that says, "Any implicitly created rows are going to be 100 pixels tall." 100 pixels tall, 100 pixels tall, every row is 100 pixels tall now.

1:56 If for some reason I wanted the first row to be 200 pixels, I could still say grid-template-rows: 200px. Now, the first row will be 200 pixels, but now anything that's added after that is 100, but that's not what I wanted. I just want them all to be 100.

2:16 This was mostly about grid-auto-rows, a little bit of practice with columns, gaps, simple enough, but this is the trickier part.