Le positionnement dans la grille

Intro

Ce sont des algorithmes embarqués dans les navigateurs qui placent automatiquement les éléments enfants dans le conteneur de grille parent.

Une liste au départ

Placée en grille de 3 colonnes de 100 pixels de large

Le conteneur parent a une largeur de 450 pixels, il peut donc parfaitement contenir trois éléments enfants de 100 pixels de largeur respectivement.

Les enfants supplémentaires

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

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).