Remarque : Je viens de traduire le texte ci-dessous et de le publier ici. Les références se trouvent à la fin de cet article.

Bonjour. Aujourd'hui, je souhaite parler de quelques mots-clés spéciaux de la grille CSS qui sont utiles pour définir la taille des pistes de la grille. La possibilité d'utiliser ces mots-clés vous permettra de déterminer avec précision les tailles de piste de grille souhaitées. Alors allons-y.

Cet article fait partie de mon introduction à la série CSS Grid. Si vous souhaitez consulter mes articles précédents, vous pouvez trouver ici la table des matières complète.

Présentation des mots-clés de dimensionnement

En ce qui concerne CSS Grid, il n'y a que trois mots-clés que vous pouvez utiliser pour déterminer la taille des pistes. Ces mots-clés sont auto, min-content et max-content. Tous peuvent être utilisés dans les propriétés CSS grid-template-colums et grid-template-rows.

Contenu minimum et contenu maximum

Si vous souhaitez que la taille de la piste de grille dépende de son contenu, vous devez utiliser l'un des deux mots-clés suivants : min-content ou max-content. Piste de grille de contenu minimum tentera de maintenir la taille minimale sans déborder de son contenu. Piste de grille de contenu maximum, cependant, suppose que l'espace libre à étendre est infini et suppose la largeur idéale pour votre contenu.

Permettez-moi de vous montrer quelques exemples montrant la différence entre les mots-clés mentionnés. Gardez à l'esprit que chaque image contient deux conteneurs : le conteneur avec une colonne de grille de contenu minimum à gauche et le conteneur avec une colonne de grille de contenu maximum à droite.

Comme vous pouvez le voir ici, il n'y a aucune différence de taille entre les colonnes min-content et max-content. La raison en est que l'image a sa "taille fixe par défaut" qui ne changera pas sauf si vous lui dites explicitement de changer. Le contenu d’un texte, quant à lui, a la capacité de « compresser » sa taille en fonction de la situation. Cette compression est effectuée à l'aide du habillage de texte (habillage de texte), c'est-à-dire que les mots simples ne sont pas renvoyés à la ligne. Sachant cela, remplaçons l'image de l'exemple ci-dessus par du texte.

Cette fois, les largeurs de colonnes sont différentes. La colonne min-content force son contenu textuel à "se retourner à la ligne" tandis que la colonne max-content se développe tellement qu'aucun retour à la ligne du texte n'est nécessaire. Notez que la colonne min-content a la même largeur que le mot le plus long et que la colonne max-content est désormais plus large que le conteneur lui-même.

Que se passe-t-il lorsqu'une colonne contient plusieurs types de contenu ? Vous trouverez ci-dessous un exemple de colonnes contenant une image et du texte.

Dans les deux cas, l'élément le plus large détermine la taille de la colonne. Dans le cas de min-content, cet élément est l'image ou le mot le plus long. Dans le cas de la colonne max-width, il s'agit d'une image ou du texte entier. Remarquez comment les deux types de contenu sont séparés verticalement dans la colonne. Je souhaite discuter de ce comportement dans l'un de mes futurs articles.

Mot-clé automatique

Le mot-clé auto est lié à l'unité fr que j'ai décrite dans les deux articles précédents. Il détermine de la même manière que la piste de la grille doit « remplir » tout l'espace disponible sur un axe donné.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

Cependant, il existe deux différences principales entre le mot-clé auto et l'unité fr. Premièrement, le mot-clé auto n'est pas une unité, vous ne pouvez donc pas l'utiliser avec une valeur numérique (par exemple 2auto) comme vous pouvez le faire avec fr. Deuxièmement, le mot-clé auto "perd" toujours avec l'unité fr, lorsque les deux sont utilisés ensemble. Voir l'exemple ci-dessous.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

Vous pouvez vous attendre à ce que la colonne automatique "remplisse" une quantité d'espace égale à la colonne fr dans la dimension horizontale. Cependant, la présence de la colonne fr amène la colonne à « réduire » automatiquement sa taille à la taille du contenu présent.

Notez que dans le cas d'un contenu textuel, la piste de grille automatique se comporte différemment de la piste de grille min-content/max-content. Lorsque auto est mélangé avec fr, auto-track ne force jamais le contenu du texte à "se retourner à la ligne" à moins que l'auto-track "remplisse" tout l'espace disponible.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

Merci d'avoir lu ce court article. Si vous souhaitez lire plus de contenu comme celui-ci, suivez mon compte dev.to ou Twitter. N'hésitez pas non plus à me faire part de tout type de retour. J'aimerais lire vos commentaires. A bientôt dans mon prochain article !

PS. Si vous souhaitez soutenir mon travail, je vous serais reconnaissant de prendre une tasse de café. Merci. ❤️

Source

Article rédigé par Mateusz Kirmuć.