Configuration de la grille

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 35 sur 43.

Défi

Facile

Dans cette série, nous allons créer la mise en page d’un site web responsive à l’aide de CSS Grid.

Commençons par regarder ce que nous allons créer :

Un site web avec :

Un en-tête
Une barre latérale
Une zone de contenu principal
Un pied de page

Voici à quoi cela ressemblera lorsque nous aurons terminé :

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

Transformez .container en mise en page de grille.
Créez une structure à 3 colonnes.
Définissez trois lignes : 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’espace entre les éléments et autour du conteneur pour obtenir un rendu propre.

6. Attribuez le nom de grid-area approprié à chaque section à l’aide de 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>