C'est sans doute la confusion la plus fréquente de tout CSS Grid : auto-fit et auto-fill se ressemblent à l'écriture, s'utilisent au même endroit, avec exactement la même syntaxe, et produisent pourtant deux résultats visuellement différents dès que la grille contient moins d'éléments que de colonnes possibles.
Les deux mots-clés s'utilisent en remplacement d'un nombre fixe dans repeat() et minmax(), pour laisser le navigateur calculer lui-même combien de colonnes tiennent dans l'espace disponible. La différence n'apparaît jamais dans la documentation qu'on lit en diagonale, seulement au rendu, ce qui en fait un piège classique même chez des personnes qui utilisent Grid depuis longtemps.
Définition
auto-fit et auto-fill sont deux valeurs utilisables à la place d'un nombre dans repeat(), pour créer autant de colonnes que l'espace disponible le permet, généralement combinées avec unité fr. Les deux calculent le même nombre de colonnes possibles. Leur différence porte uniquement sur ce qui arrive aux colonnes vides, celles qui pourraient exister mais qu'aucun élément ne vient remplir.
Le même code, deux mots différents
.grille-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grille-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Imaginez un conteneur de 900 pixels et seulement deux éléments, avec une colonne minimale de 150 pixels : six colonnes tiendraient dans cet espace, mais deux seulement sont occupées.
| Mot-clé | Colonnes vides | Résultat visuel |
|---|---|---|
auto-fill | Conservées, elles existent mais restent vides | Les deux éléments gardent leur largeur de 150px, alignés à gauche |
auto-fit | Écrasées à zéro, elles disparaissent | Les deux éléments s'étirent pour occuper toute la largeur disponible |
Pourquoi cette différence passe inaperçue si souvent
Tant qu'une grille contient plus d'éléments que de colonnes possibles, auto-fit et auto-fill produisent exactement le même résultat visuel : toutes les colonnes sont occupées, il n'y a aucune colonne vide dont le sort pourrait diverger. La différence ne se révèle que dans le cas précis où le nombre d'éléments est inférieur au nombre de colonnes que l'espace pourrait accueillir, un cas fréquent sur un grand écran avec peu de contenu, ou pendant le chargement d'une liste encore incomplète.
auto-fit, la seconde auto-fill.Comment repérer la différence dans son propre projet
Le moyen le plus simple de voir la différence est de réduire la fenêtre du navigateur jusqu'à ce que la grille passe à un nombre d'éléments inférieur au nombre de colonnes possibles, puis d'observer si les derniers éléments s'étirent ou gardent leur taille. Basculer entre auto-fit et auto-fill dans les outils de développement, sans recharger la page, suffit généralement à trancher lequel des deux correspond au rendu voulu.
Un cas d'usage typique pour chacun
auto-fit convient à une grille de cartes où chaque carte doit occuper tout l'espace utile, une galerie de témoignages par exemple, où trois témoignages sur un écran large doivent s'étaler sans laisser de blanc. auto-fill convient mieux à une grille où garder une taille de colonne prévisible compte plus que remplir l'espace, comme une grille de vignettes régulières où l'alignement doit rester identique quel que soit le nombre d'éléments chargés.
Questions fréquentes
auto-fit et auto-fill ?Non, le nombre de colonnes possibles se calcule exactement de la même façon dans les deux cas, à partir de la largeur du conteneur et de la taille minimale donnée à minmax(). Seul le comportement des colonnes qui restent vides une fois ce calcul fait diffère entre les deux mots-clés.
auto-fit à auto-fill ?Non, ce n'est pas une question de version plus moderne ou plus recommandée, seulement de comportement voulu. Une grille de produits qui doit toujours sembler pleine gagne avec auto-fit, tandis qu'une grille où l'alignement régulier des colonnes compte davantage que le remplissage gagne avec auto-fill.
Généralement non, c'est justement tout l'intérêt de la combinaison avec grid-template-columns et minmax() : le nombre de colonnes s'ajuste automatiquement à la largeur de l'écran sans qu'aucune media query ne soit nécessaire. Une media query ne redevient utile que pour des ajustements plus fins, comme changer la taille minimale elle-même selon l'écran.