CodeGym/Cours/Frontend SELF FR/Alignement du conteneur Grid

Alignement du conteneur Grid

Disponible

8.1 Propriété justify-content

CSS Grid Layout offre des outils puissants pour gérer l'alignement de l'ensemble du conteneur de grille à l'intérieur de l'espace disponible. Les propriétés justify-content, align-content et place-content te permettent de contrôler l'alignement des lignes et des colonnes à l'intérieur du conteneur, offrant ainsi flexibilité et précision lors de la création de mises en page.

La propriété justify-content gère l'alignement horizontal de toute la grille à l'intérieur du conteneur. Cette propriété est utile lorsque la taille du conteneur est plus grande que la largeur nécessaire de la grille elle-même.

Syntaxe :

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

Où : value peut prendre les valeurs suivantes :

  • start: aligne la grille au début du conteneur
  • end: aligne la grille à la fin du conteneur
  • center: centre la grille à l'intérieur du conteneur
  • stretch: étire la grille pour qu'elle remplisse tout le conteneur
  • space-around: place un espace égal autour de chaque élément
  • space-between: place un espace égal entre les éléments
  • space-evenly: place un espace égal entre les éléments et les bords du conteneur

Exemple 1 : Alignement au début du conteneur

Dans cet exemple, tout le contenu sera aligné sur le bord gauche du conteneur :

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: start; /* Aligne le contenu sur le bord gauche du conteneur */
}

Exemple 2 : Centrage du contenu

Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur :

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center; /* Centre le contenu à l'intérieur du conteneur */
}

8.2 Propriété align-content

La propriété align-content détermine comment le contenu de la grille est aligné sur l'axe vertical à l'intérieur du conteneur grid. Elle est utile lorsque la grille ne remplit pas tout l'espace vertical disponible.

Syntaxe :

.grid-container {
  align-content: value;
}

Où : value est la valeur qui détermine l'alignement vertical du contenu. Valeurs possibles :

  • start: aligne le contenu au début du conteneur
  • end: aligne le contenu à la fin du conteneur
  • center: centre le contenu à l'intérieur du conteneur
  • space-between: place un espace égal entre les éléments
  • space-around: place un espace égal autour de chaque élément
  • space-evenly: place un espace égal entre les éléments et les bords du conteneur
  • stretch (par défaut) : étire le contenu pour remplir tout l'espace disponible

Exemple 1 : Alignement au début du conteneur

Dans cet exemple, tout le contenu sera aligné sur le bord supérieur du conteneur :

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  align-content: start; /* Aligne le contenu sur le bord supérieur du conteneur */
}

Exemple 2 : Centrage du contenu

Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur :

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  align-content: center; /* Centre le contenu à l'intérieur du conteneur */
}

8.3 Propriété place-content

La propriété place-content est une abréviation pour définir en même temps les valeurs de justify-content et align-content.

Syntaxe :

.grid-container {
  place-content: justify-value align-value;
}

Où :

  • justify-value: valeur pour l'alignement horizontal (justify-content)
  • align-value: valeur pour l'alignement vertical (align-content)

Exemple 1 : Centrage du contenu à l'horizontale et à la verticale

Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur, tant à l'horizontale qu'à la verticale :

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  place-content: center center; /* Centre le contenu tant à l'horizontale qu'à la verticale */
}

Exemple 2 : Étirement du contenu sur la largeur et alignement en haut

Dans cet exemple, le contenu sera étiré sur la largeur du conteneur et aligné en haut :

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  place-content: stretch start; /* Étire le contenu sur la largeur et l'aligne en haut */
}

8.4 Exemple de mise en œuvre complète

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* Trois colonnes de largeur fixe */
  grid-template-rows: repeat(3, 100px); /* Trois lignes de hauteur fixe */
  gap: 10px;
  place-content: center center; /* Centre le contenu à l'horizontale et à la verticale */
}

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'alignement du conteneur Grid</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item item1">Élément 1</div>
      <div class="grid-item item2">Élément 2</div>
      <div class="grid-item item3">Élément 3</div>
      <div class="grid-item item4">Élément 4</div>
      <div class="grid-item item5">Élément 5</div>
      <div class="grid-item item6">Élément 6</div>
    </div>
  </body>
</html>

Explication du code :

  • .grid-container : crée un conteneur Grid avec trois colonnes de largeur fixe et trois lignes de hauteur fixe. Utilise la propriété place-content pour centrer le contenu à l'horizontale et à la verticale
  • .grid-item : définit les styles de base pour les éléments de grille, comme la couleur de fond, la couleur du texte, les marges, le centrage du texte et la bordure
1
Mission
Frontend SELF FR,  niveau 28leçon 2
Bloqué
Étirer le contenu
Étirer le contenu
1
Mission
Frontend SELF FR,  niveau 28leçon 2
Bloqué
Centrage du contenu
Centrage du contenu
Commentaires
  • Populaires
  • Nouveau
  • Anciennes
Tu dois être connecté(e) pour laisser un commentaire
Cette page ne comporte pas encore de commentaires