Das Grid einrichten

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 35 von 43.

Aufgabe

Einfach

In dieser Serie werden wir ein responsives Website-Layout mit CSS Grid erstellen.

Werfen wir zunächst einen Blick darauf, was wir erstellen werden:

Eine Website mit:

Einem Header
Einer Sidebar
Einem Hauptinhaltsbereich
Einem Footer

So wird es aussehen, wenn wir fertig sind:

Beginnen wir mit der Erstellung der gesamten Grid-Struktur für die Website! Deine Aufgaben:

Verwandle den .container in ein Grid-Layout.
Erstelle eine 3-Spalten-Struktur.
Definiere drei Zeilen: eine für den Header, eine für den Hauptinhalt und eine für den Footer.
Verwende Grid-Area-Namen, um das Layout wie folgt anzuordnen: "header header header" "hero featured featured" “footer footer footer”

5. Füge etwas Abstand zwischen den Elementen und um den Container hinzu, damit es ordentlich aussieht.

6. Weise jedem Abschnitt den richtigen grid-area-Namen zu, indem du Klassen-Selektoren verwendest: .header, .hero, .featured und .footer

Probier es selbst

<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>