Holy Grail Düzeni

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 26 / 35.

Holy Grail Layout, üstte bir üst bilgi, altta bir alt bilgi ve ortada üç sütun içeren klasik bir web tasarım desenidir:

Sol kenar çubuğu (navigasyon veya bağlantılar)
Ana içerik (orta)
Sağ kenar çubuğu (ekstra bilgi, reklamlar veya widget'lar)

Ana içeriği merkezde tuttuğu için “Kutsal Kase” olarak adlandırılır ve bloglarda, haber sitelerinde ve kontrol panellerinde oldukça yaygındır.

Nasıl çalışır:

CSS Flexbox veya Grid ile oluşturulmuştur.
Ana içerik alanı dolduracak şekilde genişlerken, yan paneller sabit veya daha küçük genişliklere sahiptir.
Küçük ekranlarda, daha iyi okunabilirlik için yan paneller ana içeriğin üstünde veya altında istiflenir.

CSS Grid kullanan örnek (basitleştirilmiş)

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

Görev

Kolay

Aşağıdaki gereksinimlerle bir Holy Grail Layout oluşturun:

Header ve footer'ın arka plan rengi için --main-color adında bir CSS değişkeni kullanın.
header, footer, nav, main ve aside için grid-area değerlerini tanımlayın.
Header ve footer içindeki metni ortalayın.

Kopya kağıdı

Holy Grail Layout (Kutsal Kase Düzeni), bir üst bilgi (header), alt bilgi (footer) ve üç sütundan oluşan klasik bir web tasarım desenidir: sol kenar çubuğu (navigasyon), ana içerik (orta) ve sağ kenar çubuğu.

Yapı:

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

CSS Grid Uygulaması:

.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; }

Ana içerik, mevcut alanı dolduracak şekilde büyürken (1fr), kenar çubukları sabit genişliklere sahiptir. Küçük ekranlarda, daha iyi okunabilirlik için kenar çubukları genellikle alt alta sıralanır.

Kendin dene

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