Configuration de la grille

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

Défi

Facile

Dans cette série, nous allons construire une mise en page de site web réactive en utilisant CSS Grid.

Tout d'abord, jetons un coup d'œil à ce que nous allons créer :

Un site web avec :

Un en-tête (header)
Une barre latérale (sidebar)
Une zone de contenu principal
Un pied de page (footer)

Voici à quoi cela ressemblera quand nous aurons terminé :

Commençons par créer la structure de grille globale pour le site web ! Vos tâches :

Transformez le .container en une mise en page en grille.
Créez une structure à 3 colonnes.
Définissez trois rangées : une pour l'en-tête, une pour le contenu principal et une pour le pied de page.
Utilisez des noms de zones de grille pour organiser la mise en page comme ceci : "header header header" "hero featured featured" “footer footer footer”

5. Ajoutez de l'espacement entre les éléments et autour du conteneur pour rendre le tout propre.

6. Attribuez le nom de grid-area correct à chaque section en utilisant les sélecteurs de classe : .header, .hero, .featured, et .footer

Essayez vous-même

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>