HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Chapter Quiz Exercises

Layout Patterns

Common Layout Patterns

By combining CSS Grid, Flexbox, and semantic HTML, we can build standard webpage layouts used by 90% of websites.

The Holy Grail Layout

The "Holy Grail" is a classic web page layout consisting of:

A Header at the top.
A Main Content area in the middle.
Two Sidebars (left and right).
A Footer at the bottom.

Using CSS Grid, achieving this layout requires just a few lines of code using grid-template-areas.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; font-family: sans-serif; text-align: center; color: white; font-weight: bold; }
    
    .holy-grail {
      display: grid;
      min-height: 100vh; /* Full viewport height */
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: 80px 1fr 60px;
      /* This is magic! We draw the layout visually: */
      grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
      gap: 5px;
      padding: 5px;
      background: #bdc3c7;
    }
    
    header { grid-area: header; background: #34495e; padding-top: 30px; }
    nav    { grid-area: nav;    background: #2980b9; padding-top: 50px; }
    main   { grid-area: main;   background: #ecf0f1; color: #333; padding-top: 50px; }
    aside  { grid-area: aside;  background: #e67e22; padding-top: 50px; }
    footer { grid-area: footer; background: #2c3e50; padding-top: 20px; }
  </style>
</head>
<body>

<div class="holy-grail">
    <header>HEADER</header>
    <nav>LEFT NAV</nav>
    <main>MAIN CONTENT AREA<br><br><span style="font-weight:normal;">Resize the window! (Though it needs Media Queries to be fully responsive)</span></main>
    <aside>RIGHT ASIDE</aside>
    <footer>FOOTER</footer>
  </div>

</body>
</html>

Result

Topics