Alignement du conteneur Grid

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 :

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

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

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

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

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

    
      .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

    
      .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;
      }
    
  

    
      <!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