Holy-Grail-Layout

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 26 von 35.

Das Holy Grail Layout ist ein klassisches Webdesign-Muster mit einem Header oben, einem Footer unten und drei Spalten in der Mitte:

Linke Seitenleiste (Navigation oder Links)
Hauptinhalt (Mitte)
Rechte Seitenleiste (Zusatzinfos, Anzeigen oder Widgets)

Es wird als „Heiliger Gral“ bezeichnet, da es den Hauptinhalt in der Mitte hält und in Blogs, Nachrichtenseiten und Dashboards sehr verbreitet ist.

Wie es funktioniert:

Erstellt mit CSS Flexbox oder Grid.
Der Hauptinhalt wächst, um den Platz auszufüllen, während Sidebars feste oder geringere Breiten haben.
Auf kleinen Bildschirmen werden Sidebars über oder unter dem Hauptinhalt gestapelt, um eine bessere Lesbarkeit zu gewährleisten.

Beispiel mit CSS Grid (vereinfacht)

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

Aufgabe

Einfach

Erstellen Sie ein Holy Grail Layout mit den folgenden Anforderungen:

Verwenden Sie eine CSS-Variable namens --main-color für die Hintergrundfarbe des Headers und Footers.
Definieren Sie die grid-area-Werte für header, footer, nav, main und aside.
Zentrieren Sie den Text innerhalb des Headers und Footers.

Spickzettel

Das Holy Grail Layout ist ein klassisches Webdesign-Muster mit einem Header, einem Footer und drei Spalten: linke Seitenleiste (Navigation), Hauptinhalt (Mitte) und rechte Seitenleiste.

Struktur:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS Grid Implementierung:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

Der Hauptinhalt wächst, um den verfügbaren Platz auszufüllen (1fr), während die Seitenleisten feste Breiten haben. Auf kleinen Bildschirmen werden die Seitenleisten normalerweise untereinander gestapelt, um eine bessere Lesbarkeit zu gewährleisten.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Holy Grail Layout</title>
  <style>
    :root {
      --main-color: rgb(76, 175, 239); /* header/footer */
      --accent-color: #ff9800; /* highlights */
      --text-color: #333;
      --heading-color: #222;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #a9eef3;
      color: var(--text-color);
    }

    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
      grid-template-columns: 160px 1fr 180px;
      min-height: 100vh;
      gap: 1rem;
    }

    header {
      color: white;
      padding: 1.5rem;
    }

    footer {
      color: white;
      padding: 1rem;
    }

    nav {
      background: #f4f4f4;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    nav h3 {
      margin-top: 0;
      color: var(--heading-color);
    }

    nav ul {
      list-style: none;
      padding: 0;
    }

    nav li {
      margin: 0.5rem 0;
    }

    nav a {
      text-decoration: none;
      color: var(--text-color);
      padding: 0.3rem 0.5rem;
      border-radius: 4px;
      transition: background 0.2s;
    }

    nav a:hover {
      background: var(--accent-color);
      color: white;
    }

    main {
      padding: 1.5rem;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    main h2 {
      margin-top: 0;
      color: var(--heading-color);
    }

    aside {
      background: #fff7e6;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    aside h3 {
      margin-top: 0;
      color: var(--accent-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>Travel Adventures</h1>
      <p>Explore the world, one journey at a time</p>
    </header>

    <nav>
      <h3>Navigation</h3>
      <ul>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Travel Tips</a></li>
        <li><a href="#">Photo Gallery</a></li>
      </ul>
    </nav>

    <main>
      <h2>Featured Destination: Japan</h2>
      <p>
        Japan is a country where ancient traditions meet modern innovation. 
        From the serene temples of Kyoto to the bustling streets of Tokyo, 
        there’s something for every traveler.
      </p>
      <p>
        Don’t forget to try sushi, explore cherry blossoms in spring, 
        and relax in an onsen hot spring bath.
      </p>
    </main>

    <aside>
      <h3>Quick Facts</h3>
      <ul>
        <li>Capital: Tokyo</li>
        <li>Language: Japanese</li>
        <li>Currency: Yen</li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2025 Travel Adventures Blog</p>
    </footer>
  </div>
</body>
</html>