0:00 Next up, we're going to talk about the placement algorithm that places the individual elements into the grid. As we've said many times in this course, the default direction is that it goes from left to right in a row. It fills this FIRST and then this and then it goes from top to bottom to do the next row and then the next row and the next row.

0:21 If I define my grid as let's do a 3x3. We'll have three 1fr columns and three 1fr rows. We don't need grid-auto-rows for now. I've labeled each of the boxes with text -- FIRST, SECOND, THIRD, FOURTH, FIFTH, SIXTH. That's the same order that they occur in the mark-up. FIRST, SECOND, THIRD, FOURTH, FIFTH, and SIXTH.

0:48 The default direction, the default algorithm for placing elements is in the row direction. Left to right, fill that row then fill this row, then fill this row.

1:00 We can change that if we want it to work in the column direction using grid-auto-flow and we set it to column. Now, you can see it's filling elements into the grid in a column direction. FIRST, SECOND, THIRD, FOURTH, FIFTH, SIXTH, SEVENTH, EIGHTH, NINTH, if we had them. We do have them, so I could just turn those on, but you can already see the behavior here.

1:24 Again, the default is row, so I can set it manually to row, but it won't be any different than the default. I can set it to column. In the next video, I'll show you another option.