Ce sont des algorithmes embarqués dans les navigateurs qui placent automatiquement les éléments enfants dans le conteneur de grille parent.
Le conteneur parent a une largeur de 450 pixels, il peut donc parfaitement contenir trois éléments enfants de 100 pixels de largeur respectivement.
Sur le principe, il reste de la place (150 pixels pour être précis) mais le nouvel élément enfant se place sur une nouvelle ligne car nous avons explicitement indiqué que nous ne souhaitions que trois colonnes.
grid-auto-flow: column; >> l’élément enfant supplémentaire se place sur une nouvelle colonne et occupe toute la place disponible restante, soit 150 pixels.
Les 3 premières colonnes sont appelées colonnes explicites car elles correspondent aux colonnes indiquées dans la propriété grid-template-columns et la dernière colonne est colonne implicite
Les colonnes implicites se partagent l’espace disponible restant.
La propriété grid-auto-columns permet de spécifier la largeur des colonnes supplémentaires implicites.
La propriété grid-auto-rows permet de spécifier la hauteur des lignes supplémentaires implicites (ici 50px).