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

Table Des Matières

Aligner La Grille Et Ses Éléments

Column-axisRow-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.

Mode horizontal-Column-axis and Row-axis

mode vertical-Column-axis et Row-axis

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.

alignement De La Grille-CSS Grid Alignement Center

 

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.

Alignement de la Grille-CSS Grid Alignement start

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é.

CSS Grid Alignement space-around

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.

CSS Grid Alignement space-evenly

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.

CSS Gride La propriété align-content center

start

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

CSS Grid La propriété align-content start

end

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

CSS Grid La propriété align-content end

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é.

CSS Grid La propriété align-content space around

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.

CGrid SS La propriété align-content space-between

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.

CSS Grid La propriété align-content space-evenly

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.

CSS Grid La propriété justify-items stretch

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).

CSS Grid La propriété justify-items center

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 conteCSS Grid La propriété justify-items endnu 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.

CSS Grid La propriété align-items stretch

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)

CSS Grid La propriété align-items center

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).

CSS Grid La propriété align-items end

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.

CSS Grid La propriété justify-self stretchcenter

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).

CSS Grid La propriété justify-self center

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).

CSS Grid La propriété justify-self start

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).

CSS Grid La propriété justify-self end

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.

CSS Grid La propriété align-self stretch

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).

CSS Grid La propriété align-self center

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).

CSS Grid La propriété align-self start

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).

CSS Grid La propriété align-self end

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.

Grid Inspector Tool

 

 

 

 

 

 

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.