Définition des lignes et colonnes

3.1 Propriété grid-template-columns

Le CSS Grid Layout permet de créer des mises en page complexes de pages web en utilisant des lignes et des colonnes. Les deux propriétés clés pour définir la structure de la grille sont grid-template-rows et grid-template-columns. Ces propriétés permettent de définir le nombre et les tailles des lignes et des colonnes dans le conteneur Grid, ce qui donne aux développeurs un contrôle total sur la mise en page des éléments.

La propriété grid-template-columns définit le nombre et les tailles des colonnes dans la grille. Elle accepte une ou plusieurs valeurs, qui peuvent être exprimées dans différentes unités de mesure, telles que pixels (px), pourcentages (%), unités flexibles (fr), et d'autres.

Exemple 1 : Définition des tailles fixes des colonnes

Dans cet exemple, la grille comportera trois colonnes. La première colonne a une largeur de 100px, la deuxième colonne a une largeur de 200px, et la troisième colonne a une largeur de 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Trois colonnes de tailles fixes */
      }
    
  

Exemple 2 : Utilisation des unités flexibles (fr)

Dans cet exemple, la grille comportera trois colonnes. La première et la troisième colonnes occuperont une quantité égale d'espace, et la deuxième colonne sera deux fois plus large que chacune d'elles :

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Trois colonnes de tailles flexibles */
      }
    
  

Exemple 3 : Utilisation de la répétition (repeat)

Dans cet exemple, on utilise la fonction repeat qui permet de simplifier l'écriture. La grille comportera trois colonnes de même largeur :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
      }
    
  

Exemple 4 : Définition des tailles minimales et maximales (minmax)

Dans cet exemple, chacune des trois colonnes aura une largeur minimale de 100px et une taille flexible qui peut s'étendre jusqu'à 1fr en fonction de l'espace disponible :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Trois colonnes avec largeur minimale de 100px et tailles flexibles */
      }
    
  

3.2 Propriété grid-template-rows

La propriété grid-template-rows est similaire à grid-template-columns, mais elle définit le nombre et les tailles des lignes dans la grille. Elle accepte également une ou plusieurs valeurs qui peuvent être exprimées dans différentes unités de mesure.

Exemple 1 : Définition des tailles fixes des lignes

Dans cet exemple, la grille comportera trois lignes. La première ligne a une hauteur de 50px, la deuxième ligne une hauteur de 100px, et la troisième ligne une hauteur de 50px :

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Trois lignes de tailles fixes */
      }
    
  

Exemple 2 : Utilisation des unités flexibles (fr)

Dans cet exemple, la grille comportera trois lignes. La première et la troisième lignes occuperont une quantité égale d'espace, et la deuxième ligne sera deux fois plus haute que chacune d'elles :

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Trois lignes de tailles flexibles */
      }
    
  

Exemple 3 : Utilisation de la répétition (repeat)

Dans cet exemple, on utilise la fonction repeat qui permet de simplifier l'écriture. La grille comportera trois lignes de même hauteur :

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Trois lignes égales */
      }
    
  

Exemple 4 : Définition des tailles minimales et maximales (minmax)

Dans cet exemple, chacune des trois lignes aura une hauteur minimale de 50px et une taille flexible qui peut s'étendre jusqu'à 1fr en fonction de l'espace disponible :

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Trois lignes avec hauteur minimale de 50px et tailles flexibles */
      }
    
  

3.3 Combinaison des propriétés

Combinaison des propriétés grid-template-rows et grid-template-columns

Ces propriétés peuvent être utilisées ensemble pour créer des grilles complexes avec des tailles de lignes et de colonnes variées.

Dans cet exemple, la grille comportera deux colonnes : la première colonne occupera 1 partie de l'espace disponible et la deuxième colonne — 2 parties. La grille comportera également deux lignes : la première ligne aura une hauteur de 100px, et la deuxième ligne une hauteur de 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Exemple de mise en œuvre complète :

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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 CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Elément 1</div>
            <div class="grid-item">Elément 2</div>
            <div class="grid-item">Elément 3</div>
            <div class="grid-item">Elément 4</div>
          </div>
        </body>
      </html>
    
  

Explication du code :

• .grid-container : définit le conteneur comme un grid-container avec deux colonnes et deux lignes. Les espacements entre les éléments sont définis à l'aide de la propriété gap
• .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 intérieures, le centrage du texte et la bordure