How are child elements automatically placed in a CSS Grid, and how can you change the order?

Question

Accepted Answer

By default grid items auto-fill the cells left-to-right, top-to-bottom — and you flip them to fill column-by-column with grid-auto-flow: column.
You usually don't position each child by hand. The grid places them automatically into the cells you defined, in source order. For a 4-column grid holding 12 items:
Items fill 1-2-3-4 across the first row, then 5-6-7-8 across the second, then 9-10-11-12 across the third.
.container {
  display: grid;
  /* Fill down columns first instead of across rows */
  grid-auto-flow: column;
}

With grid-auto-flow: column, the filling direction rotates: items go 1-2-3 down the first column, 4-5-6 down the second, and so on. This is handy when you want a list to read top-to-bottom in columns, like a phone directory, without rewriting your HTML.