Grid-auto-flow: column vs row

Serve para dizermos como queremos que os items (neste exemplo os li), sejam distribuídos na grelha. Por omissão os items são colocados horizontalmente nas colunas definidas, e quando acabam as colunas, passam à fila seguinte.
Seguindo a nossa grelha de 5 filas x 3 colunas (o X marca células vazias como só temos 12 elementos HTML):


   1 |  2 |  3 
   4 |  5 |  6 
   7 |  8 |  9 
  10 | 11 | 12 
   X |  X |  X  
  

Ao alterarmos o grid-auto-flow para o valor column, estamos a dizer que queremos distribuir os items verticalmente, nas colunas, assim:


   1 |  6 | 11 
   2 |  7 | 12 
   3 |  8 | X 
   4 |  9 | X
   5 | 10 | X