0:00 Next, we're going to talk about grid-auto-columns, which is the sister/brother to grid-auto-rows. Both of them have to do with the implicit grid elements that are added outside the bounds of the explicitly defined grid.

0:13 My defined grid here is very simple. It has three columns that are 200px each and two rows that are 200px each. This is what we see. This is my explicit grid right here. 200x200 little squares, three columns, two rows.

0:32 But I have 10 elements that I've tried to add into this container. These guys down here obviously don't fit within those six slots. As we've already discussed, we can use grid-auto-rows to change the size of those automatically created rows to be maybe just also 200px. There we go. All these new rows that have been added in will be 200 pixels tall, even though I only said explicitly there's two rows.

1:03 If I set the grid-auto-flow to the column direction -- which remember changes the algorithm that determines how elements are placed -- now we have FIRST, SECOND, THIRD, FOURTH, FIFTH, SIXTH. This is my explicit grid here.

1:19 It's hard to show that. The overlay doesn't make it very clear, but remember, I only defined three columns and two rows. This is the explicit grid. These elements have been added in outside of the explicit grid or in the implicit grid.

1:34 I can control the size of those columns by using grid-auto-columns, and maybe I'll make them small, 100px wide. These additional columns that were added are 100px wide.

1:47 It doesn't look great. I mean, none of this looks great really, but this illustrates that they are different than these elements that are in the explicit grid. These are elements that didn't have space in the explicit grid. They are assigned a column width of 100px, but I could also just give them 200px. There we go. Now they're all the same size as the preexisting columns.

2:09 That's grid-auto-columns.