تخطيط الكأس المقدسة (Holy Grail)

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 26 من 35.

يُعد تخطيط الكأس المقدسة (Holy Grail Layout) نمطاً كلاسيكياً لتصميم الويب، حيث يتكون من رأس (header) في الأعلى، وتذييل (footer) في الأسفل، وثلاثة أعمدة في المنتصف:

الشريط الجانبي الأيسر (التنقل أو الروابط)
المحتوى الرئيسي (المركز)
الشريط الجانبي الأيمن (معلومات إضافية، إعلانات، أو أدوات)

يُطلق عليه اسم "الكأس المقدسة" لأنه يبقي المحتوى الرئيسي في المنتصف، وهو شائع جداً في المدونات، والمواقع الإخبارية، ولوحات التحكم.

كيف يعمل:

تم بناؤه باستخدام CSS Flexbox أو Grid.
يتمدد المحتوى الرئيسي ليملأ المساحة، بينما تمتلك الأشرطة الجانبية عرضاً ثابتاً أو أصغر.
على الشاشات الصغيرة، تتراكم الأشرطة الجانبية فوق أو تحت المحتوى الرئيسي لتحسين قابلية القراءة.

مثال على استخدام CSS Grid (مبسط)

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

التحدي

سهل

قم بإنشاء تخطيط Holy Grail Layout بالمتطلبات التالية:

استخدم متغير CSS يسمى --main-color للون خلفية الـ header والـ footer.
قم بتعريف قيم grid-area لكل من header، و footer، و nav، و main، و aside.
قم بتوسيط النص داخل الـ header والـ footer.

ورقة مرجعية

يُعد تخطيط الكأس المقدسة (Holy Grail Layout) نمط تصميم ويب كلاسيكي يتكون من رأس (header)، وتذييل (footer)، وثلاثة أعمدة: شريط جانبي أيسر (للتنقل)، ومحتوى رئيسي (في المنتصف)، وشريط جانبي أيمن.

البنية:

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

تنفيذ باستخدام CSS Grid:

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

يتمدد المحتوى الرئيسي لملء المساحة المتاحة (1fr) بينما تمتلك الأشرطة الجانبية عروضاً ثابتة. وفي الشاشات الصغيرة، عادةً ما تترتب الأشرطة الجانبية فوق بعضها البعض لتحسين القراءة.

جرّب بنفسك

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