Comprendre la distinction entre « aligner les éléments » et « aligner le contenu » dans la disposition en grille

Le module de disposition en grille introduit deux ensembles de propriétés, « justifier/aligner les éléments » et « justifier/aligner le contenu », qui jouent des rôles distincts dans l'alignement des éléments de la grille et de la grille elle-même au sein d'une grille conteneur.

Clarification de la terminologie de la grille

• Conteneur de grille : Le conteneur parent qui définit l'espace global de la grille.
• Grille : Une grille structurée de lignes qui divise le conteneur de grille en zones de grille.
• Grille Éléments : Boîtes qui contiennent du contenu entrant dans les zones de grille.

Align-items vs. Align-content

Le "align- Les propriétés items" et "align-content", comme leurs noms l'indiquent, alignent respectivement les éléments de la grille et la grille. Plus précisément :

• justify-content et align-content alignent les pistes de la grille dans la zone de contenu du conteneur de grille.
• justify-self et justify-items alignent les éléments de la grille dans la dimension en ligne (horizontalement par par défaut).
• align-self et align-items alignent les éléments de la grille dans la dimension du bloc (verticale par défaut).

Répondre à la réclamation de l'auteur

L'affirmation de l'auteur selon laquelle les propriétés "-content" existent parce que "parfois la taille totale de votre grille peut être inférieure à la taille de son conteneur de grille" met en évidence ce qui suit :

• Lorsque la grille est plus petite que le conteneur de grille, il y a de l'espace libre disponible.
• Le "justify-content" et les propriétés "align-content" peuvent utiliser cet espace pour aligner la grille au centre ou autrement dans le conteneur.
• En revanche, si la taille de la grille est égale à la taille du conteneur, il n'y a pas d'espace libre et ces propriétés d'alignement je n'ai pas effet.

Illustrations pour plus de clarté

[Image d'illustration du W3C montrant une grille plus petite que son conteneur, avec "justify-content" et "align- content" alignant la grille dans le conteneur.]

Extrait de la spécification

Pour plus de clarté, des extraits pertinents du CSS Les spécifications de disposition de la grille sont fournies :

• "Les éléments de la grille peuvent être alignés dans la dimension en ligne en utilisant la propriété justification-self sur l'élément de grille ou la propriété justifier-éléments sur le conteneur de grille."
• "Les éléments de la grille peuvent également être alignés dans la dimension du bloc en utilisant la propriété align-self sur l'élément de grille ou la propriété align-items sur le conteneur de grille."
• "Si les bords extérieurs de la grille le font ne correspondent pas aux bords du contenu du conteneur de grille, les pistes de grille sont alignées dans la zone de contenu en fonction des propriétés justifier-contenu et align-content sur le conteneur de grille. "