CSS Grid – Alignement de la Grille et de ses Éléments

Aligner La CSS Grid Et Ses Éléments

Column-axis & Row-axis

La direction en ligne par défaut pour les documents HTML est de gauche à droite, ce qui signifie que le flux de texte commence à partir de la gauche et se termine à droite. La direction de flux de bloc par défaut est de haut en bas, Ce qui signifie que les niveaux des blocs sont empilés du haut de la page vers le bas. Il est possible de modifier la direction avec la propriété de mode écriture.

Grid utilise les termes column-axis (axe de colonne) et row-axis (axe de ligne) pour décrire les directions d’alignement. column-axis se réfère à l’axe du bloc, tandis que row-axis fait référence à l’axe en ligne. Ces axes dépendent de la direction du mode écriture.

Propriétés Liées à L’alignement De La Grille

La propriété justify-content

justify-content: center | start | end | space-between | space-around | space-evenly

Parfois, les bords de la grille ne correspondent pas aux bords du conteneur de grille, ce qui pourrait se produire si les pistes de grille sont dimensionnées avec des unités fixes. Pour de tels cas, nous pouvons justifier la grille dans le conteneur de grille le long de l’axe de ligne (row-axis), ou dans la dimension en ligne, en appliquant la propriété justify-content au conteneur de grille. Tous les diagrammes d’exemple supposent que la direction du document par défaut est de gauche à droite et le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

center

Centre la grille dans le conteneur de la grille le long de l’axe de la ligne row-axis.

start

Aligne la grille pour être aligné avec le bord de départ du conteneur de grille le long de l’axe de la ligne row-axis.

end

Aligne la grille pour être aligné avec le bord de fin du conteneur de grille le long de l’axe de la ligne row-axis.

space-around

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe de la ligne de sorte que chaque piste de la grille dispose d’un espace égal de chaque côté, avec un espace demi-taille à chaque extrémité.

space-between

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe de la ligne avec la première piste de la grille affleurant avec le bord de départ du conteneur de la grille et la dernière piste de la grille affleurant avec le bord de fin du conteneur de la grille.

space-evenly

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe de la ligne de sorte que l’espace entre n’importe quelles 2  pistes de grille adjacentes soit identiques.

La propriété align-content

align-content: center | start | end | space-between | space-around | space-evenly

Parfois, les bords de la grille ne correspondent pas aux bords du conteneur de grille, ce qui pourrait se produire si les pistes de grille sont dimensionnées avec des unités fixes. Pour de tels cas, nous pouvons aligner la grille dans le conteneur de grille le long de l’axe de la colonne (column-axis) ou dans la dimension du bloc (block-dimension) en appliquant la propriété align-content au conteneur de grille. Tous les diagrammes d’exemple supposent que la direction du document par défaut est de gauche à droite et le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

center

Centre la grille dans le conteneur de la grille le long de l’axe des colonnes column-axis.

start

Aligne la grille pour affleurer le bord de départ du conteneur de grille le long de l’axe des colonnes column-axis.

end

Aligne la grille pour affleurer le bord de fin du conteneur de grille le long de l’axe des colonnes column-axis.

space-around

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe des colonnes de sorte que chaque piste de la grille ait un espace égal de chaque côté de cette piste, avec un espace demi-taille à chaque extrémité.

space-between

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe de la colonne avec la première piste de la grille affleurant avec le bord de départ du conteneur de grille et la dernière piste de la grille affleurant avec le bord de fin du conteneur de la grille.

space-evenly

Distribue les pistes de la grille uniformément dans le conteneur de la grille le long de l’axe des colonnes de sorte que l’espace entre n’importe quelles 2 pistes de grille adjacentes soit identiques.

La propriété justify-items

justify-items: center | start | end | stretch

Nous pouvons justifier le contenu dans les éléments de la grille dans la dimension en ligne (inline-dimension), ou le long de l’axe de la ligne (row-axis), en appliquant la propriété justify-items au conteneur de la grille (grid container). Tous les diagrammes d’exemple supposent que la direction du document par défaut est de gauche à droite et que le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

stretch

Ceci est la valeur par défaut. Remplit la largeur de la zone de la grille.

center

Justifie le contenu des éléments de la grille au centre de la zone de la grille le long de l’axe de la ligne (row-axis).

start

Justifie le contenu des éléments de la grille avec le bord de départ de la zone de la grille le long de l’axe de la ligne  (row-axis).

end

Justifie le contenu des éléments de grille avec le bord de fin de la zone de grille le long de l’axe de la ligne (row-axis).

La propriété align-items

align-items: center | start | end | stretch

Nous pouvons définir l’alignement pour le contenu dans les éléments de la grille dans la dimension du bloc (block-dimension) ou le long de l’axe de la colonne (column-axis) en appliquant la propriété align-items au conteneur de la grille (grid container). Tous les diagrammes d’exemple supposent que la direction du document par défaut de gauche à droite et que le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

stretch

Ceci est la valeur par défaut. Remplit la largeur de la zone de la grille.

center

Aligne le contenu des éléments de grille au centre de la zone de grille le long de l’axe de la colonne (column-axis)

start

Aligne le contenu des éléments de la grille avec le bord de fin de la zone de la grille le long de l’axe des colonnes (column-axis).

La propriété justify-self

justify-self: center | start | end | stretch

Nous pouvons justifier le contenu dans les éléments de grille individuels dans la dimension en ligne (inline-dimension), ou le long de l’axe de la ligne(row-axis), en appliquant la propriété justify-self à l’élément de grille lui-même. Tous les diagrammes d’exemple supposent que la direction du document par défaut est de gauche à droite et que le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

stretch

Ceci est la valeur par défaut. Remplit la largeur de la zone de la grille.

center

Aligne le contenu de l’élément de la grille au centre de la zone de la grille le long de l’axe de la ligne (row-axis).

start

Justifie le contenu de l’élément de grille avec le bord de départ de la zone de grille le long de l’axe de la ligne (row-axis).

end

Justifie le contenu de l’élément de grille avec le bord de fin de la zone de grille le long de l’axe de ligne (row-axis).

La propriété align-self

align-self: center | start | end | stretch

Nous pouvons définir l’alignement pour le contenu dans les éléments de grille individuels dans la dimension de bloc (block-dimension) ou le long de l’axe (column-axis) de la colonne en appliquant la propriété align-self à l’élément de grille lui-même. Tous les diagrammes d’exemple supposent que la direction du document par défaut est de gauche à droite et que le mode d’écriture est horizontal-tb. Les valeurs possibles ont les significations suivantes:

stretch

Ceci est la valeur par défaut. Remplit la largeur de la zone de la grille.

center

Aligne le contenu de l’élément de grille au centre de la zone de grille le long de l’axe de la colonne (column-axis).

start

Aligne le contenu de l’élément de la grille avec le bord de départ de la zone de grille le long de l’axe de la colonne (column-axis).

end

Aligne le contenu de l’élément de grille avec le bord de fin de la zone de grille le long de l’axe de la colonne (column-axis).

Grid Inspector Tool

Firefox version 52 et plus a un outil très utile appelé l’outil Grid Inspector. Il permet aux développeurs de visualiser le code de la grille en superposant les lignes de grille sur l’ensemble d’éléments à afficher: grille. Pour utiliser cet outil, ouvrez les outils de développement en cliquant avec le bouton droit de la souris sur la page et en sélectionnant Inspect Element. Mettez en surbrillance un élément avec l’affichage: la propriété de la grille est appliquée. Vous devriez voir une petite icône à gauche du mot “grid”. Cliquez sur cela pour basculer les lignes de la grille sur la page.