CSS Conteneur de grille - Aligner le contenu de la grille

Conteneur de grille CSS - Aligner le contenu de la grille

À l'intérieur du conteneur de grille, vous pouvez définir l'alignement du contenu avec les propriétés suivantes :

  • justify-content - Aligne le contenu de la grille lorsqu'il n'occupe pas tout l'espace disponible sur l'axe principal (horizontalement)
  • align-content - Aligne le contenu de la grille lorsqu'il n'occupe pas tout l'espace disponible sur l'axe transversal (verticalement)
  • place-content - Propriété abrégée pour align-content et justify-content

La propriété CSS justify-content

La propriété justify-content est utilisée pour aligner le contenu de la grille lorsqu'il n'occupe pas tout l'espace disponible sur l'axe principal (horizontalement).

Cette propriété peut avoir l'une des valeurs suivantes :

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

Remarque : La largeur totale du contenu de la grille doit être inférieure à celle du conteneur pour que la propriété justify-content ait un effet.

Exemple

La valeur space-evenly affiche les éléments de la grille avec un espace égal autour d'eux :

.container {
display: grid;
justify-content: space-evenly;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur space-around affiche les éléments de la grille avec de l'espace autour d'eux :

.container {
display: grid;
justify-content: space-around;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur space-between affiche les éléments de la grille avec de l'espace entre eux :

.container {
display: grid;
justify-content: space-between;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur center positionne les éléments de la grille au centre du conteneur :

.container {
display: grid;
justify-content: center;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur start positionne les éléments de la grille au début du conteneur :

.container {
display: grid;
justify-content: start;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur end positionne les éléments de la grille à la fin du conteneur :

.container {
display: grid;
justify-content: end;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

La propriété CSS align-content

La propriété align-content est utilisée pour aligner le contenu de la grille lorsqu'il n'occupe pas tout l'espace disponible sur l'axe transversal (verticalement).

Cette propriété peut avoir l'une des valeurs suivantes :

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

Remarque : La hauteur totale du contenu de la grille doit être inférieure à celle du conteneur pour que la propriété align-content ait un effet.

Dans les exemples suivants, nous utilisons un conteneur de 300 pixels de haut pour mieux démontrer la propriété align-content .

Exemple

La valeur center positionne les éléments de la grille au milieu du conteneur :

.container {
display: grid;
height: 300px;
align-content: center;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

Avec space-evenly , les lignes de la grille sont réparties uniformément dans le conteneur, avec un espace égal en haut, en bas et entre :

.container {
display: grid;
height: 300px;
align-content: space-evenly;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

Avec space-around , l'espace entre les lignes de la grille est égal, mais l'espace avant le premier élément et après le dernier élément est fixé à la moitié de l'espace entre les lignes :

.container {
display: grid;
height: 300px;
align-content: space-around;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

Avec space-between , l'espace entre les lignes de la grille est égal, mais le premier élément est aligné avec le bord de départ du conteneur, et le dernier élément est aligné avec le bord de fin :

.container {
display: grid;
height: 300px;
align-content: space-between;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur start positionne les éléments de la grille au début du conteneur :

.container {
display: grid;
height: 300px;
align-content: start;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur end positionne les éléments de la grille à la fin du conteneur :

.container {
display: grid;
height: 300px;
align-content: end;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

La propriété CSS place-content

La propriété place-content est une propriété abrégée pour align-content et justify-content .

Si place-content a deux valeurs :

  • place-content: start center; - la valeur align-content est 'start' et la valeur justify-content est 'center'

Si place-content a une valeur :

  • place-content: end; - les valeurs align-content et justify-content sont 'end'

Remarque : La hauteur et la largeur totales de l'élément de la grille doivent être inférieures à celles du conteneur pour que la propriété place-content ait un effet.

Exemple

La valeur center positionne les éléments de la grille au milieu du conteneur (à la fois verticalement et horizontalement) :

.container {
display: grid;
height: 300px;
place-content: center;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Exemple

La valeur end space-between aligne les lignes de la grille vers le bas du conteneur, et aligne les éléments de la grille avec le même espace entre eux horizontalement :

.container {
display: grid;
height: 300px;
place-content: end space-between;
}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »