0:00 Next up, it's time for another exercise. This one's a little bit different because I've added a tiny bit of JavaScript with a button. This is what we're trying to recreate. When you click this button, a new box is added to our grid. There might be 9 boxes, but there might be 21 boxes. We don't know how many boxes.

0:20 What I want to happen here is that every box fits into this grid where there's three equally sized column. That's the first thing I want you to do, make a grid with three equally sized columns. There's a gap between the columns and rows of 10px, as you can see.

0:35 Most importantly and most relevant to what we just learned, notice that each box is exactly the same height. Each box is inserted into a row that's 100px tall, but I'm not predefining how many rows there are. Because there could be 1,000 rows. There might only be 1 row.

0:53 This is what I'd like you to implement. You don't need to touch the HTML at all. No need to touch that. You don't need to touch the JavaScript at all. It's just there to add the boxes in to make this exercise a bit more exciting.

1:05 If we didn't have these boxes dynamically being added in, there would be other ways that you could cheat, I guess. You could just prewrite the grid with the set number of rows, but I don't want a set number of rows.

1:18 Here's our starter. There is no grid enabled currently, so you'll need to do a couple of things. You'll need to enable grid in the container. You need to define three equally sized columns. You need to add the grid gaps, 10px, and you need to make sure that each new row is 100px tall.