Répartition de l'espace

6.1 Propriété grid-gap

CSS Grid Layout offre des outils flexibles pour gérer l'espace entre les éléments de la grille. Les propriétés grid-gap, grid-row-gap et grid-column-gap permettent de définir facilement la distance entre les lignes et les colonnes, ce qui aide à créer des mises en page propres et organisées. Regardons ces propriétés de plus près.

La propriété grid-gap (abrégée en gap) définit la distance générale entre les lignes et les colonnes dans la grille. Cette propriété est une abréviation pour grid-row-gap et grid-column-gap.

Syntaxe :

    
      .grid-container {
        grid-gap: value;
      }
    
  

Où :

• value: la valeur de l'espace entre les lignes et les colonnes. Peut être spécifiée dans différentes unités de mesure (px, %, fr, auto, etc.)

Exemple 1: Même valeur pour les lignes et les colonnes

Dans cet exemple, un espace de 20px sera appliqué à la fois aux lignes et aux colonnes :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 20px; /* Espace de 20px entre toutes les lignes et colonnes */
      }
    
  

Exemple 2: Différentes valeurs pour les lignes et les colonnes

Dans cet exemple, deux valeurs sont utilisées : la première (10px) pour les lignes, la seconde (20px) pour les colonnes :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 10px 20px; /* 10px entre les lignes, 20px entre les colonnes */
      }
    
  

6.2 Propriété grid-row-gap

La propriété grid-row-gap définit la distance entre les lignes dans la grille. Cela permet de spécifier une valeur distincte pour l'espace entre les lignes, indépendamment des colonnes.

Syntaxe :

    
      .grid-container {
        grid-row-gap: value;
      }
    
  

Où :

Exemple 1: Définir un espace fixe entre les lignes

Dans cet exemple, l'espace entre les lignes sera de 15px:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 15px; /* Espace de 15px entre les lignes */
      }
    
  

Exemple 2: Utiliser des pourcentages pour définir l'espace

Dans cet exemple, l'espace entre les lignes sera de 5% de la hauteur de la ligne :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 5%; /* Espace de 5% de la hauteur de la ligne */
      }
    
  

6.3 Propriété grid-column-gap

La propriété grid-column-gap définit la distance entre les colonnes dans la grille. Cela permet de définir une valeur distincte pour l'espace entre les colonnes, indépendamment des lignes.

Syntaxe :

    
      .grid-container {
        grid-column-gap: value;
      }
    
  

Où :

• value: la valeur de l'espace entre les colonnes. Peut être spécifié dans différentes unités de mesure

Exemple 1: Définir un espace fixe entre les colonnes

Dans cet exemple, l'espace entre les colonnes sera de 25px :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 25px; /* Espace de 25px entre les colonnes */
      }
    
  

Exemple 2: Utiliser em pour définir l'espace

Dans cet exemple, l'espace entre les colonnes sera de 2em :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 2em; /* Espace de 2em entre les colonnes */
      }
    
  

6.4 Utilisation combinée de grid-row-gap et grid-column-gap

Vous pouvez combiner les propriétés grid-row-gap et grid-column-gap pour un contrôle plus précis des espaces entre les lignes et les colonnes.

Exemple d'implémentation complète :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes de même largeur */
        grid-template-rows: repeat(3, 100px); /* Trois lignes de hauteur fixe */
        grid-row-gap: 15px; /* Espace de 15px entre les lignes */
        grid-column-gap: 25px; /* Espace de 25px entre les colonnes */
      }

      .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'utilisation de grid-gap, grid-row-gap et grid-column-gap</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 container Grid avec trois colonnes de même largeur et trois lignes de hauteur fixe. Utilise les propriétés grid-row-gap et grid-column-gap pour définir les espaces entre les lignes et les colonnes
• .grid-item: définit les styles de base pour les éléments de la grille, tels que la couleur d'arrière-plan, la couleur du texte, les marges intérieures, l'alignement du texte et la bordure