Paso 10: Definir las filas y columnas que ocupa cada item
Al poner la propiedad display a grid, se genera la cuadrícula.
Como no hemos puesto filas ni columnas, sólo aparece el borde y las líneas que demarcan cada una de las secciones hijas del "container" tipo grid.
Dado que encuentra tres hijos del container, pone cada una de las secciones en una columna. Pero eso no es lo que queremos. Tenemos que dar el ancho apropiado a cada una de las secciones y la que no quepa se colocará debajo automáticamente.
Con la propiedad repeat podemos repetir un determinado patrón en la fila
Podemos establecer el número de filas con la propiedad auto. Genera 3 filas pero como no hemos especificado en qué fila va cada item y caben todos en la primera, no sitúa cada cosa en su sitio.
Paso 8: Hemos establecido el alto de las filas, pero hasta que no situemos cada elemento en su sitio no tomará la apariencia final.
Paso 10: Vamos a definir en cada item el número de filas y columnas que ocupa