Grid repeat auto-fill et auto-fit
Aide-mémoire basé sur Relationship of grid layout to other layout methods.
grid-template-columns: 1fr 1fr 1fr ou autrement dit grid-template-columns: repeat(3, 1fr)
c'est intuitif ("divise toute la place disponible en 3 fractions")
Mais grid-template-columns: repeat(auto-fill, 200px)
ou grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
un peu moins…
Exemple 1 : repeat(3, 1fr)
Ça me donne 3 blocs d'un peu moins de 300px.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 2 : repeat(3, 350px)
Pas la place, ça déborde de mon conteneur grille (qui est contraint en largeur par son conteneur).
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 3 : repeat(auto-fill, 350px)
En met autant que possible en largeur puis passe à la ligne, comme flex-wrap: wrap.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 4 : repeat(auto-fit, 350px)
Pareil, aucune différence visible.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 5 : repeat(auto-fill, 160px)
Un exemple avec 160px de large pour commencer à introduire la différence entre auto-fill et auto-fit. Comme j'ai seulement 3 blocs, on voit qu'il laisse 2 "cases fantômes" quand on active la mise en évidence de la grille dans l'inspecteur de styles.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 6 : repeat(auto-fit, 160px)
Aucune différence visible avec l'exemple précédent mais quand on active la mise en évidence dans l'inspecteur de styles, on voit qu'il ne crée pas de "cases fantômes" dans l'espace restant.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 7 : repeat(auto-fill, minmax(160px, 1fr))
J'ajoute minmax(160px, 1fr) qui signifie "entre 160px et 1 fraction". Comme j'ai un conteneur grid de 905px, on peut caser 5,65625 blocs de 160px. Le navigateur ne va pas afficher 0,65625 bloc 😏 donc il en met 5 et utilise l'espace restant pour élargir un peu les blocs à environ 171px. J'ai donc 2 "cases fantômes" de 171px visibles quand on active la mise en évidence dans l'inspecteur de styles.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple 7 : repeat(auto-fit, minmax(160px, 1fr))
Avec auto-fit, cette fois on voit que ça prend bien 1fr. Auto-fit élargit les blocs pour combler le vide. Avec 3 blocs seulement ce n'est pas différent de repeat(3, 1fr). Par contre, si on ne connait pas le nombre de blocs à l'avance, c'est très utile. Ça permet de faire comme Flexbox.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Et un quatrième bloc pour voir…
Exemple 9
Avec 5 blocs ou plus, on ne voit plus la différence entre auto-fit et auto-fill. La différence se voit uniquement quand il reste de l'espace sur une grille d'une seule ligne.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Un quatrième bloc.
Un cinquième bloc.
Un sixième bloc.
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Un quatrième bloc.
Un cinquième bloc.
Un sixième bloc.
Note 1 : pour qu'un élément prenne toute la largeur dans une grille de 3 éléments, par exemple, c'est-à-dire une grille agencée par grid-template-columns: repeat(3, 1fr) il faut lui appliquer grid-column: span 3
Duis nisl nulla, porta ut, molestie sit amet, tincidunt eu, enim. Cras eu mauris. Cras dolor imperdiet dolor, id lobortis ligula nunc sed dolor.
Lorem.
Suspendisse ligula dolor, varius nec, vulputate id, luctus sed, lacus. Pellentesque purus urna, porta molestie, mattis non, posuere et, velib. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Un quatrième bloc.
Un cinquième bloc.
Un sixième bloc.
Note 2 : repeat(auto-fit, …px) peut être très utile combiné à display: inline-grid pour faire une grille qui s'adapte à son contenu. Voir cette page d'exemple.