Zones nommées

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 33 sur 43.

Au lieu de placer des éléments en utilisant des numéros de ligne, vous pouvez donner des noms à des parties de votre grille en utilisant la propriété grid-template-areas. Cette méthode est idéale pour créer des mises en page propres et lisibles — particulièrement lorsque vous travaillez avec plusieurs sections comme des en-têtes, des barres latérales et des pieds de page. Consultez l'exemple ci-dessous :

Nous définissons un conteneur avec CSS Grid et utilisons grid-template-areas pour créer une mise en page nommée :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Chaque ligne de texte forme une rangée, et chaque mot de la ligne fait partie de la grille. Si vous répétez un mot, cette zone s'étendra sur plus d'espace.

Ensuite, vous faites correspondre vos éléments HTML à ces noms comme ceci :

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une mise en page en grille CSS pour une page Web de base avec les zones suivantes, comme sur l'image ci-dessous :

Définissez les propriétés suivantes sur le sélecteur .container :

display à grid
grid-template-columns à 1fr 3fr
grid-template-rows à auto 1fr auto
grid-template-areas à :
"header header"
"profile main"
"footer footer"

Assignez chaque élément à sa zone respective. Par exemple, pour le .header, définissez grid-area sur header.

Aide-mémoire

Utilisez grid-template-areas pour créer des mises en page de grille nommées :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Chaque ligne de texte crée une rangée, et chaque mot de la ligne fait partie de la grille. La répétition d'un mot étend cette zone sur plus d'espace.

Assignez des éléments aux zones de grille en utilisant grid-area :

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.