Bố cục Holy Grail

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 26 trên 35.

Bố cục Holy Grail là một kiểu thiết kế web kinh điển, có phần đầu ở trên cùng, phần chân ở dưới cùng và ba cột ở giữa:

Thanh bên trái (điều hướng hoặc liên kết)
Nội dung chính (ở giữa)
Thanh bên phải (thông tin bổ sung, quảng cáo hoặc tiện ích)

Nó được gọi là “bố cục chén thánh” vì phần nội dung chính nằm ở giữa, kiểu bố cục này rất phổ biến trên blog, trang tin tức và bảng điều khiển.

Cách hoạt động:

Được xây dựng bằng CSS Flexbox hoặc Grid.
Nội dung chính mở rộng để lấp đầy không gian, trong khi thanh bên có chiều rộng cố định hoặc nhỏ hơn.
Trên màn hình nhỏ, các thanh bên xếp phía trên hoặc phía dưới nội dung chính để dễ đọc hơn.

Ví dụ sử dụng CSS Grid (đơn giản hóa)

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

Thử thách

Dễ

Tạo bố cục Holy Grail với các yêu cầu sau:

Dùng biến CSS có tên --main-color làm màu nền cho phần đầu trang và chân trang.
Xác định các giá trị grid-area cho header, footer, nav, main và aside.
Căn giữa văn bản bên trong phần đầu trang và chân trang.

Tự làm thử

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