Das Grid einrichten

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

Aufgabe

Einfach

In dieser Serie erstellen wir mithilfe von CSS Grid ein responsives Website-Layout.

Schauen wir uns zunächst an, was wir erstellen werden:

Eine Website mit:

Einem Header
Einer Seitenleiste
Einem Hauptinhaltsbereich
Einer Fußzeile

So wird es aussehen, wenn wir fertig sind:

Beginnen wir damit, die grundlegende Grid-Struktur für die Website zu erstellen! Deine Aufgaben:

Wandle .container in ein Grid-Layout um.
Erstelle eine Struktur mit 3 Spalten.
Definiere drei Zeilen: eine für den Header, eine für den Hauptinhalt und eine für die Fußzeile.
Verwende Grid-Bereichsnamen, um das Layout wie folgt anzuordnen:"header header header" "hero featured featured" “footer footer footer”

5. Füge zwischen den Elementen und rund um den Container etwas Abstand hinzu, damit das Layout übersichtlich aussieht.

6. Weise jedem Abschnitt mithilfe von Klassenselektoren den korrekten grid-area-Namen zu: .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>