Utilisons le simulateur ↔
.conteneur { display : grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
padding-bottom :10px; // pour pouvoir tirer le bloc }
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 200px :
En 200px, nous pouvons placer 4 blocs de 50px.
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 249px :
Les blocs se répartissent 49px équitablement, chaque bloc a une dimension de 50+12~
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 250px :
Les blocs sont retombés à une dimension de 50px !
Le principe est le suivant : 250px on peut placer 5 blocs de 50px. Il n'y a que quatre blocs. les blocs ne se répartissent pas les 50px non occupé.
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 299px :
Taille d'un bloc
Pour une largeur du conteneur de 299px et une taille de base de 50px :
nb blocs = largueur du conteneur/taille de base
taille d'un bloc = taille de base + répartition entre blocs
répartition entre blocs = largueur du conteneur - (nb blocs*taille de base)/nb de blocs
répartition entre blocs = largueur du conteneur - (nb blocs*taille de base)/nb de blocs
nb blocs = 299/50 = 5
taille d'un bloc = 50 + (299-5*50)/5 = ~60px
auto-fill
Plaçons le bloc rouge en [2,2]..conteneur { display : grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
padding-bottom :10px; // pour pouvoir tirer le bloc }
#it1 { grid-column : 2/3; grid-row : 2/3; }
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 399px :
- augmenter le bloc noir à l'aide du curseur en bas à droite pour atteindre 400px.
Dans 400px on peut placer 4 blocs de 100px, mais il n'y a que 3 blocs. Les blocs prennent 100px chacun.
- Déplacer le bloc noir à l'aide du curseur en bas à droite pour atteindre 499px :
auto-fit
Le comportement est différent ici c'est le nombre "réels" de blocs qui se répartie l'ensemble de la longueur.
Ainsi dans le cas d'un conteneur de 400px, on reparti les 100px équitablement sur 3 blocs.
Ainsi dans le cas d'un conteneur de 400px, on reparti les 100px équitablement sur 3 blocs.
"the alternate auto-fit keyword, this would behave in the same way as described above but once all grid items have been placed any completely empty tracks will be dropped."
