CSS Grid : mots-clés de dimensionnement

Remarque : Je viens de traduire le texte ci-dessous et de le publier ici. Les références sont à 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 c'est parti.

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 l'index complet.

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 la grille dépende de son contenu, vous devez utiliser l'un des deux mots-clés suivants : min-content ou max-content. Min-content grid track 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.

Laissez-moi 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 text Wrapping (text Wrapping), 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 texte à "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 la colonne max-content est désormais plus large que le conteneur lui-même.

Que se passera-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 du 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 auto "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.

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!