Grid fit-content()
Aide-mémoire basé sur The fit-content() CSS function clamps a given size….
À ne pas confondre avec width: fit-content (valeur méconnue qui n'a jamais été supportée par IE, ce qui fait qu'on a toujours utilisé display: block à la place)
Dans Grid, minmax() est facile à comprendre.
mais fit-content() un peu moins, étant donné qu'elle équivaut à min(maximum size, max(minimum size, argument))
En fait, quand on écrit grid-template-columns: fit-content(8ch) fit-content(300px) fit-content(50%); ça veut dire que
- La première case de la grille doit faire au maximum 8 ch de large, mais moins si le contenu est moins large que ça, et elle doit laisser la place au contenu s'il est plus large que ça.
- La deuxième case de la grille doit faire au maximum 100px, mais moins si le contenu est moins large que ça, etc.
- La troisième case de la grille doit faire au maximum 50 % de large, etc.
Exemple 1
Avec peu de contenu
Ici, quasi rien.
Ici, ça fait moins que 300px.
Ici, pas de quoi remplir 50% de la largeur.
Exemple 2
Avec beaucoup de contenu dans les 2 premières cases
Voici huit zéros pour 8ch : 00000000 On voit bien que la case ne dépasse pas la largeur de ces huit zéros.
Cette case ne dépassera pas 300px, même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.
Ici, pas de quoi remplir 50% de la largeur.
Exemple 3
Avec beaucoup de contenu dans la 3e case
Ici, quasi rien.
Ici, ça fait moins que 300px.
Cette case ne dépassera pas 452px (50% de 905px, la largeur de son conteneur), même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.
Exemple 4
Avec beaucoup de contenu partout. Comme 8ch font environ 92px (un zéro fait environ 11,5px de large) + 300px + 452px = 844px de large, il reste un peu de vide dans le conteneur.
Voici huit zéros pour 8ch : 00000000 On voit bien que la case ne dépasse pas la largeur de ces huit zéros.
Cette case ne dépassera pas 300px, même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.
Cette case ne dépassera pas 452px (50% de 905px, la largeur de son conteneur), même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.
Exemple 5
Avec un contenu plus large que la valeur de fit-content(8ch) dans la première case, on voit que ça ne déborde pas. La valeur de fit-content n'est pas une limite dure.
Voici seize zéros : 0000000000000000
Ici on s'en fiche.
Ici, pareil.
Alors qu'avec grid-template-columns: minmax(2px, 8ch), ça déborde des 8ch
Voici seize zéros : 0000000000000000
Ici on s'en fiche.
Ici, pareil.
Exemple 6
Avec beaucoup de contenu partout et la première case qui contient un mot qui dépasse les 8ch, le navigateur tasse les deux cases suivantes.
Voici beaucoup trop de zéros pour 8ch : 000000000000000000000000000000000000.
Cette case ne dépassera pas 300px, même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.
Cette case ne dépassera pas 452px (50% de 905px, la largeur de son conteneur), même si j'ai beaucoup de texte : Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus. Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue, tempus nec, laoreet at, porttitor.