Alignement des éléments dans Grid

7.1 Propriété justify-items

CSS Grid Layout fournit des outils efficaces pour gérer l'alignement des éléments dans la grille. Les propriétés justify-items, align-items et place-items te permettent de régler précisément comment les éléments de la grille sont disposés à l'intérieur de leurs cellules horizontalement et verticalement. Voyons ces propriétés plus en détail.

La propriété justify-items détermine l'alignement horizontal de tous les éléments de la grille à l'intérieur de leurs cellules sur l'ensemble de la grille.

Syntaxe :

    
      .grid-container {
        justify-items: value;
      }
    
  

Où :

• value: la valeur déterminant l'alignement horizontal des éléments. Valeurs possibles :
  • start: aligne les éléments au début de la cellule
  • end: aligne les éléments à la fin de la cellule
  • center: centre les éléments dans la cellule
  • stretch (par défaut) : étire les éléments pour qu'ils remplissent toute la largeur de la cellule

Exemple 1 : Alignement au début de la cellule

Dans cet exemple, tous les éléments seront alignés à gauche de leurs cellules :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Tous les éléments sont alignés au début de la cellule */
      }
    
  

Exemple 2 : Centrage des éléments

Dans cet exemple, tous les éléments seront centrés dans leurs cellules :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Tous les éléments sont centrés dans la cellule */
      }
    
  

7.2 Propriété align-items

La propriété align-items détermine l'alignement vertical de tous les éléments de la grille à l'intérieur de leurs cellules sur l'ensemble de la grille.

Syntaxe :

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

Où :

• value: la valeur déterminant l'alignement vertical des éléments. Valeurs possibles :
  • start: aligne les éléments au début de la cellule
  • end: aligne les éléments à la fin de la cellule
  • center: centre les éléments dans la cellule verticalement
  • stretch (par défaut) : étire les éléments pour qu'ils remplissent toute la hauteur de la cellule

Exemple 1 : Alignement au début de la cellule

Dans cet exemple, tous les éléments seront alignés en haut de leurs cellules :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Tous les éléments sont alignés en haut de la cellule */
      }
    
  

Exemple 2 : Centrage des éléments verticalement

Dans cet exemple, tous les éléments seront centrés verticalement dans leurs cellules :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Tous les éléments sont centrés verticalement dans la cellule */
      }
    
  

7.3 Propriété place-items

La propriété place-items est une écriture abrégée pour définir simultanément les valeurs de align-items et justify-items.

Syntaxe :

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

Où :

• align-value: valeur pour l'alignement vertical dans la cellule (align-items)
• justify-value: valeur pour l'alignement horizontal dans la cellule (justify-items)

En cas de mention d'une seule valeur pour la propriété place-items, par exemple place-items: stretch, les éléments seront alignés dans les deux directions.

Exemple 1 : Centrage des éléments horizontalement et verticalement

Dans cet exemple, tous les éléments seront centrés dans leurs cellules aussi bien horizontalement que verticalement :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Les éléments sont centrés tant horizontalement que verticalement */
      }
    
  

Exemple 2 : Étirement des éléments en hauteur et alignement en haut à gauche

Dans cet exemple, tous les éléments seront étirés en hauteur et alignés en haut à gauche de leurs cellules :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Les éléments s'étendent sur toute la hauteur de la cellule et sont alignés en haut à gauche */
      }
    
  

7.4 Exemple de mise en œuvre complète

Exemple de mise en œuvre complète :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
        grid-template-rows: repeat(3, 100px); /* Trois lignes de hauteur fixe */
        gap: 10px;
        place-items: center center; /* Centrage des éléments tant horizontalement que verticalement */
      }

      .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 des éléments dans CSS 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 égale et trois lignes de hauteur fixe. Utilise la propriété place-items pour centrer les éléments aussi bien horizontalement que verticalement.
• .grid-item: définit les styles de base pour les éléments de la grille, tels que la couleur de fond, la couleur du texte, les marges, le centrage du texte et la bordure.