CodeGym /Cours /Frontend SELF FR /Grid Areas

Grid Areas

Frontend SELF FR

Niveau 28, Leçon 3

Disponible

9.1 Propriété grid-template-areas

Le CSS Grid Layout offre de grandes possibilités pour créer des mises en page complexes avec des zones nommées (grid areas). La propriété grid-template-areas permet de définir des zones de la grille qui peuvent être utilisées pour un placement simplifié des éléments. Cette propriété permet aux développeurs d'organiser visuellement la mise en page et de faciliter sa maintenance.

Concepts principaux de grid-template-areas

Définition des zones :
- La propriété grid-template-areas permet de donner des noms à différentes zones de la grille
- Chaque nom de zone représente un groupe rectangulaire de cellules
Utilisation des zones nommées :
- Les zones définies peuvent être utilisées pour placer des éléments en attribuant la propriété grid-area à chaque élément

Syntaxe de grid-template-areas :

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Syntaxe pour les éléments Grid :

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

Explication :

Chaque ligne dans la valeur de grid-template-areas représente une ligne dans la grille
Chaque mot dans la ligne représente une cellule ou un groupe de cellules
Les points (.) peuvent être utilisés pour les cellules vides

9.2 Exemple d'utilisation de grid-template-areas

Exemple d'implémentation complète :

CSS

    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemple de Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explication du code :

.grid-container: définit le conteneur Grid avec display: grid et configure la mise en page de la grille en utilisant grid-template-areas. Dans ce cas, la mise en page se compose de trois lignes : la première ligne est une en-tête, la deuxième ligne contient une barre latérale et le contenu principal, et la troisième ligne est un pied de page
.header, .sidebar, .main, .footer: définissent les styles pour les différentes zones de la grille et associent ces zones aux noms dans grid-template-areas en utilisant la propriété grid-area

9.3 Gestion des zones vides

La propriété grid-template-areas permet de laisser des zones vides en utilisant le symbole du point (.) pour indiquer un espace vide.

Exemple d'implémentation complète :

CSS

    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Zones vides de Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explication du code :

.grid-container: crée un conteneur Grid avec trois zones : en-tête, contenu principal et pied de page. La ligne du milieu contient des zones vides à gauche et à droite du contenu principal
.header, .main, .footer: définissent les styles pour les zones et les associent aux noms des zones dans grid-template-areas

Précédent Leçon précédente

Suivant Leçon suivante

Commentaires

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION