Crear grid por columna

[gogupe]

Hola a todos.

Estoy usando este código para crear una maquetación de una página al estilo de un periódico.

La idea es que haya tres columnas, los resultados se vayan introduciendo por columna, para ir creando la página.

Código CSS:

grid-auto-flow: column;
 

EL ejemplo que he estoy cogiendo de la web w3schools.com es este:

Código CSS:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding:20px 0;
  font-size: 30px;
}
 

Código HTML:

<div class="grid-container" style="grid-auto-flow: column;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
 

Pues bien, no se como hacer para que cuando se introduzca x elementos, se vayan poniendo debajo, que solo haya 3 columnas, con este ejemplo vas creciendo las columnas hacia la derecha. He estado jugando con grid-template-rows, pero no se muy bien como hacerlo.

Muchas gracias.