Holy Grail Layout 🏆

The ultimate web layout pattern: header, footer, and three columns where the center is fluid and sidebars are fixed.

What is the Holy Grail Layout?

The Holy Grail layout refers to a web page that has a header, footer, and three columns of content where the center column is fluid and the sidebars have fixed widths. It's considered the "holy grail" because it was historically difficult to achieve with older CSS techniques.

🎯 Perfect Structure

Ideal balance between content and navigation

📱 Fully Responsive

Adapts beautifully to all screen sizes

⚡ Modern CSS

Easy to implement with Flexbox and Grid

Flexbox Holy Grail

Key Features:

  • Uses display: flex with flex-direction: column
  • Main content area uses flex: 1 to fill available space
  • Sidebars have fixed widths
  • Natural source order for accessibility
  • Easy to make responsive

Flexbox Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Holy Grail Layout</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 1rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .holy-grail {
      display: flex;
      flex-direction: column;
      min-height: 90vh;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    }
    
    /* Header */
    .header {
      background: linear-gradient(135deg, #2c3e50, #34495e);
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    
    .nav {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 1rem;
    }
    
    .nav a {
      color: #ecf0f1;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      transition: background 0.3s;
    }
    
    .nav a:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    /* Main Content Area */
    .main-content {
      display: flex;
      flex: 1;
    }
    
    /* Sidebars */
    .sidebar {
      width: 250px;
      padding: 2rem;
      background: #f8f9fa;
    }
    
    .sidebar-left {
      border-right: 1px solid #e9ecef;
    }
    
    .sidebar-right {
      border-left: 1px solid #e9ecef;
    }
    
    .sidebar h3 {
      color: #2c3e50;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #3498db;
    }
    
    .sidebar ul {
      list-style: none;
    }
    
    .sidebar li {
      padding: 0.5rem 0;
      border-bottom: 1px solid #e9ecef;
    }
    
    .sidebar a {
      color: #34495e;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .sidebar a:hover {
      color: #3498db;
    }
    
    /* Main Article */
    .main-article {
      flex: 1;
      padding: 3rem;
      background: white;
    }
    
    .article-content {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .article-content h2 {
      color: #2c3e50;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    
    .article-content p {
      color: #555;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .feature {
      background: #f8f9fa;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
      border-left: 4px solid #3498db;
    }
    
    /* Footer */
    .footer {
      background: #2c3e50;
      color: white;
      text-align: center;
      padding: 2rem;
      margin-top: auto;
    }
    
    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
      
      .sidebar {
        width: 100%;
        order: 2;
      }
      
      .sidebar-left, .sidebar-right {
        border: none;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
      }
      
      .main-article {
        order: 1;
      }
      
      .nav {
        flex-direction: column;
        gap: 0.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="holy-grail">
      <!-- Header -->
      <header class="header">
        <h1>🏆 Flexbox Holy Grail</h1>
        <p>The perfect layout structure for modern web applications</p>
        <nav class="nav">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#services">Services</a>
          <a href="#blog">Blog</a>
          <a href="#contact">Contact</a>
        </nav>
      </header>

      <!-- Main Content -->
      <div class="main-content">
        <!-- Left Sidebar -->
        <aside class="sidebar sidebar-left">
          <h3>📚 Quick Links</h3>
          <ul>
            <li><a href="#dashboard">Dashboard</a></li>
            <li><a href="#profile">User Profile</a></li>
            <li><a href="#settings">Settings</a></li>
            <li><a href="#messages">Messages</a></li>
            <li><a href="#notifications">Notifications</a></li>
          </ul>
          
          <h3 style="margin-top: 2rem;">📊 Stats</h3>
          <div style="background: white; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
            <div style="color: #27ae60; font-weight: bold;">↑ 42% Growth</div>
            <div style="color: #e74c3c; margin-top: 0.5rem;">↓ 18% Bounce</div>
          </div>
        </aside>

        <!-- Main Article -->
        <main class="main-article">
          <div class="article-content">
            <h2>✨ The Holy Grail Layout</h2>
            <p>This layout represents the "holy grail" of web design - a header, footer, and three-column layout where the center column is fluid and the sidebars have fixed widths.</p>
            
            <div class="feature-grid">
              <div class="feature">
                <h4>🚀 Flexible</h4>
                <p>Adapts to different screen sizes</p>
              </div>
              <div class="feature">
                <h4>📱 Responsive</h4>
                <p>Works on all devices</p>
              </div>
              <div class="feature">
                <h4>⚡ Modern</h4>
                <p>Uses CSS Flexbox</p>
              </div>
              <div class="feature">
                <h4>🎯 Semantic</h4>
                <p>Clean HTML structure</p>
              </div>
            </div>
            
            <p>The holy grail layout has been a long-standing goal in web design because it provides an optimal structure for content-heavy websites while maintaining excellent usability and navigation.</p>
          </div>
        </main>

        <!-- Right Sidebar -->
        <aside class="sidebar sidebar-right">
          <h3>🔔 Recent Activity</h3>
          <ul>
            <li>New user registered</li>
            <li>Article published</li>
            <li>System updated</li>
            <li>Backup completed</li>
          </ul>
          
          <h3 style="margin-top: 2rem;">👥 Online Users</h3>
          <div style="display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap;">
            <span style="background: #3498db; color: white; padding: 0.3rem 0.6rem; border-radius: 15px; font-size: 0.8rem;">John D.</span>
            <span style="background: #e74c3c; color: white; padding: 0.3rem 0.6rem; border-radius: 15px; font-size: 0.8rem;">Sarah M.</span>
            <span style="background: #27ae60; color: white; padding: 0.3rem 0.6rem; border-radius: 15px; font-size: 0.8rem;">Mike T.</span>
          </div>
        </aside>
      </div>

      <!-- Footer -->
      <footer class="footer">
        <p>&copy; 2024 Holy Grail Layout. All rights reserved. | Built with CSS Flexbox</p>
        <div style="margin-top: 1rem;">
          <a href="#privacy" style="color: #ecf0f1; margin: 0 1rem;">Privacy Policy</a>
          <a href="#terms" style="color: #ecf0f1; margin: 0 1rem;">Terms of Service</a>
          <a href="#contact" style="color: #ecf0f1; margin: 0 1rem;">Contact Us</a>
        </div>
      </footer>
    </div>
  </div>
</body>
</html>

CSS Grid Holy Grail

Grid Template Areas

Use semantic area names to define your layout structure clearly and maintainably.

grid-template-areas:
  "header header header"
  "sidebar main sidebar2"
  "footer footer footer";

Perfect Control

Grid gives you precise control over rows, columns, and spacing with minimal code.

grid-template-columns:
  250px 1fr 300px;
grid-template-rows:
  auto 1fr auto;

CSS Grid Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Holy Grail Layout</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 1rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .holy-grail-grid {
      display: grid;
      grid-template-areas: 
        "header header header"
        "left-sidebar main right-sidebar"
        "footer footer footer";
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 250px 1fr 250px;
      min-height: 90vh;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    }
    
    /* Header */
    .header {
      grid-area: header;
      background: linear-gradient(135deg, #e44d26, #f16529);
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    
    /* Navigation */
    .nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .nav-item {
      background: rgba(255, 255, 255, 0.2);
      padding: 0.8rem;
      border-radius: 8px;
      text-align: center;
      transition: all 0.3s;
    }
    
    .nav-item:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
    }
    
    /* Sidebars */
    .sidebar-left {
      grid-area: left-sidebar;
      background: linear-gradient(180deg, #f8f9fa, #e9ecef);
      padding: 2rem;
      border-right: 1px solid #dee2e6;
    }
    
    .sidebar-right {
      grid-area: right-sidebar;
      background: linear-gradient(180deg, #f8f9fa, #e9ecef);
      padding: 2rem;
      border-left: 1px solid #dee2e6;
    }
    
    /* Main Content */
    .main {
      grid-area: main;
      padding: 3rem;
      background: white;
    }
    
    .content-grid {
      display: grid;
      gap: 2rem;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .card {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 12px;
      border-left: 4px solid #e44d26;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-top: 1rem;
    }
    
    .stat-item {
      background: white;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
    }
    
    /* Footer */
    .footer {
      grid-area: footer;
      background: #2c3e50;
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    /* Responsive Design */
    @media (max-width: 1024px) {
      .holy-grail-grid {
        grid-template-areas: 
          "header header"
          "left-sidebar main"
          "right-sidebar right-sidebar"
          "footer footer";
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto 1fr auto auto;
      }
    }
    
    @media (max-width: 768px) {
      .holy-grail-grid {
        grid-template-areas: 
          "header"
          "left-sidebar"
          "main"
          "right-sidebar"
          "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
      }
      
      .stats {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="holy-grail-grid">
      <!-- Header -->
      <header class="header">
        <h1>🎯 CSS Grid Holy Grail</h1>
        <p>Modern layout power with CSS Grid</p>
        <div class="nav-grid">
          <div class="nav-item">🏠 Home</div>
          <div class="nav-item">📊 Dashboard</div>
          <div class="nav-item">👤 Profile</div>
          <div class="nav-item">⚙️ Settings</div>
        </div>
      </header>

      <!-- Left Sidebar -->
      <aside class="sidebar-left">
        <h3>📋 Main Menu</h3>
        <ul style="list-style: none; margin-top: 1rem;">
          <li style="padding: 0.8rem; border-bottom: 1px solid #dee2e6;">📁 Projects</li>
          <li style="padding: 0.8rem; border-bottom: 1px solid #dee2e6;">👥 Team</li>
          <li style="padding: 0.8rem; border-bottom: 1px solid #dee2e6;">📅 Calendar</li>
          <li style="padding: 0.8rem; border-bottom: 1px solid #dee2e6;">📈 Analytics</li>
          <li style="padding: 0.8rem;">🔔 Notifications</li>
        </ul>
      </aside>

      <!-- Main Content -->
      <main class="main">
        <div class="content-grid">
          <div class="card">
            <h2>🚀 Grid Power</h2>
            <p>CSS Grid provides incredible control over two-dimensional layouts. This holy grail implementation uses grid-template-areas for semantic structure.</p>
            <div class="stats">
              <div class="stat-item">
                <strong>95%</strong>
                <div>Efficiency</div>
              </div>
              <div class="stat-item">
                <strong>100%</strong>
                <div>Responsive</div>
              </div>
            </div>
          </div>
          
          <div class="card">
            <h2>🎨 Design Features</h2>
            <p>This layout demonstrates advanced Grid capabilities including responsive reordering, flexible tracks, and perfect alignment.</p>
          </div>
        </div>
      </main>

      <!-- Right Sidebar -->
      <aside class="sidebar-right">
        <h3>🔔 Live Feed</h3>
        <div style="background: white; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
          <div style="display: flex; align-items: center; margin-bottom: 1rem;">
            <span style="background: #e44d26; color: white; padding: 0.3rem 0.6rem; border-radius: 50%; margin-right: 0.5rem;">1</span>
            <span>New project started</span>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;">
            <span style="background: #27ae60; color: white; padding: 0.3rem 0.6rem; border-radius: 50%; margin-right: 0.5rem;">2</span>
            <span>Team meeting at 3 PM</span>
          </div>
          <div style="display: flex; align-items: center;">
            <span style="background: #3498db; color: white; padding: 0.3rem 0.6rem; border-radius: 50%; margin-right: 0.5rem;">3</span>
            <span>Update deployed</span>
          </div>
        </div>
      </aside>

      <!-- Footer -->
      <footer class="footer">
        <div class="footer-grid">
          <div>
            <h4>Company</h4>
            <p>About Us</p>
            <p>Careers</p>
            <p>Contact</p>
          </div>
          <div>
            <h4>Resources</h4>
            <p>Documentation</p>
            <p>API</p>
            <p>Help Center</p>
          </div>
          <div>
            <h4>Legal</h4>
            <p>Privacy</p>
            <p>Terms</p>
            <p>Cookies</p>
          </div>
        </div>
        <p style="margin-top: 2rem;">&copy; 2024 Grid Holy Grail. Built with CSS Grid.</p>
      </footer>
    </div>
  </div>
</body>
</html>

Responsive Holy Grail

Mobile-First Approach

Start with a single column for mobile devices, then progressively enhance for larger screens using media queries.

@media (min-width: 768px) {
  .main-wrapper {
    flex-direction: row;
  }
}

Adaptive Sidebars

Sidebars can collapse into accordions or move to different positions on smaller screens to maintain usability.

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Responsive Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Holy Grail Layout</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 1rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .responsive-holy-grail {
      display: flex;
      flex-direction: column;
      min-height: 90vh;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    }
    
    /* Header */
    .header {
      background: linear-gradient(135deg, #8e44ad, #9b59b6);
      color: white;
      padding: 2rem;
    }
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    
    .logo {
      font-size: 2rem;
      font-weight: bold;
    }
    
    .mobile-menu {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    /* Main Content */
    .main-wrapper {
      display: flex;
      flex: 1;
      transition: all 0.3s;
    }
    
    /* Sidebars */
    .sidebar {
      width: 300px;
      padding: 2rem;
      background: #f8f9fa;
      transition: all 0.3s;
    }
    
    .sidebar-left {
      border-right: 1px solid #e9ecef;
    }
    
    .sidebar-right {
      border-left: 1px solid #e9ecef;
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      padding: 3rem;
      background: white;
      transition: all 0.3s;
    }
    
    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }
    
    .feature-card {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
    }
    
    /* Footer */
    .footer {
      background: #2c3e50;
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    /* Mobile Styles */
    @media (max-width: 1200px) {
      .sidebar {
        width: 250px;
      }
    }
    
    @media (max-width: 992px) {
      .sidebar {
        width: 200px;
        padding: 1.5rem;
      }
      
      .main-content {
        padding: 2rem;
      }
    }
    
    @media (max-width: 768px) {
      .mobile-menu {
        display: block;
      }
      
      .main-wrapper {
        flex-direction: column;
      }
      
      .sidebar {
        width: 100%;
        display: none;
      }
      
      .sidebar.active {
        display: block;
      }
      
      .sidebar-left, .sidebar-right {
        border: none;
        border-bottom: 1px solid #e9ecef;
      }
      
      .content-grid {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 480px) {
      .header-content {
        flex-direction: column;
        text-align: center;
      }
      
      .main-content {
        padding: 1rem;
      }
      
      .feature-card {
        padding: 1.5rem;
      }
    }
    
    /* Demo Controls */
    .demo-controls {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 1rem;
      border-radius: 10px;
      z-index: 1000;
    }
    
    .size-indicator {
      font-family: monospace;
      background: #34495e;
      padding: 0.5rem;
      border-radius: 5px;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="demo-controls">
    <div class="size-indicator" id="sizeIndicator">Desktop: 1200px+</div>
    <button onclick="toggleSidebar('left')">Toggle Left Sidebar</button>
    <button onclick="toggleSidebar('right')">Toggle Right Sidebar</button>
  </div>

  <div class="container">
    <div class="responsive-holy-grail">
      <!-- Header -->
      <header class="header">
        <div class="header-content">
          <div class="logo">📱 Responsive Holy Grail</div>
          <button class="mobile-menu" onclick="toggleMobileMenu()">☰</button>
          <nav class="nav" id="mainNav">
            <a href="#home" style="color: white; margin: 0 1rem; text-decoration: none;">Home</a>
            <a href="#features" style="color: white; margin: 0 1rem; text-decoration: none;">Features</a>
            <a href="#about" style="color: white; margin: 0 1rem; text-decoration: none;">About</a>
            <a href="#contact" style="color: white; margin: 0 1rem; text-decoration: none;">Contact</a>
          </nav>
        </div>
      </header>

      <!-- Main Content -->
      <div class="main-wrapper">
        <!-- Left Sidebar -->
        <aside class="sidebar sidebar-left" id="leftSidebar">
          <h3>🎛️ Controls</h3>
          <p>This layout adapts to all screen sizes. Try resizing your browser!</p>
          
          <div style="background: white; padding: 1rem; border-radius: 8px; margin-top: 1rem; color: #333;">
            <h4>Breakpoints:</h4>
            <ul>
              <li>Desktop: 1200px+</li>
              <li>Tablet: 768px-1199px</li>
              <li>Mobile: < 768px</li>
            </ul>
          </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
          <h1>✨ Responsive Magic</h1>
          <p>This holy grail layout automatically adapts to different screen sizes. Resize your browser to see the magic happen!</p>
          
          <div class="content-grid">
            <div class="feature-card">
              <h3>📱 Mobile First</h3>
              <p>Designed for mobile devices first, then enhanced for larger screens</p>
            </div>
            <div class="feature-card">
              <h3>💻 Desktop Optimized</h3>
              <p>Full three-column layout on large screens</p>
            </div>
            <div class="feature-card">
              <h3>📐 Flexible Grid</h3>
              <p>Uses CSS Grid and Flexbox for maximum flexibility</p>
            </div>
            <div class="feature-card">
              <h3>🎯 Perfect Proportions</h3>
              <p>Maintains ideal reading widths and spacing</p>
            </div>
          </div>
        </main>

        <!-- Right Sidebar -->
        <aside class="sidebar sidebar-right" id="rightSidebar">
          <h3>📊 Performance</h3>
          <div style="background: white; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
            <div style="display: flex; justify-content: space-between;">
              <span>Load Time:</span>
              <span style="color: #27ae60;">1.2s</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
              <span>Responsive:</span>
              <span style="color: #27ae60;">100%</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
              <span>SEO Score:</span>
              <span style="color: #27ae60;">95%</span>
            </div>
          </div>
        </aside>
      </div>

      <!-- Footer -->
      <footer class="footer">
        <p>&copy; 2024 Responsive Holy Grail. Built with modern CSS techniques.</p>
        <p style="margin-top: 1rem; font-size: 0.9rem;">Resize this window to see responsive behavior in action!</p>
      </footer>
    </div>
  </div>

  <script>
    function updateSizeIndicator() {
      const width = window.innerWidth;
      const indicator = document.getElementById('sizeIndicator');
      
      if (width >= 1200) {
        indicator.textContent = 'Desktop: 1200px+';
      } else if (width >= 768) {
        indicator.textContent = 'Tablet: 768px-' + (width - 1) + 'px';
      } else {
        indicator.textContent = 'Mobile: ' + width + 'px';
      }
    }
    
    function toggleSidebar(side) {
      const sidebar = document.getElementById(side + 'Sidebar');
      sidebar.classList.toggle('active');
    }
    
    function toggleMobileMenu() {
      const nav = document.getElementById('mainNav');
      nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
    }
    
    // Initialize
    updateSizeIndicator();
    window.addEventListener('resize', updateSizeIndicator);
  </script>
</body>
</html>

Modern Dashboard Example

📊 Analytics Ready

Perfect structure for data dashboards with stats and charts

🎨 Modern Design

Clean, professional appearance with modern UI elements

⚡ Performance

Optimized layout with CSS variables and efficient styling

Modern Dashboard Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Dashboard Holy Grail</title>
  <style>
    :root {
      --primary: #6366f1;
      --secondary: #8b5cf6;
      --accent: #06b6d4;
      --dark: #1e293b;
      --light: #f8fafc;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 1rem;
      color: var(--dark);
    }
    
    .dashboard {
      display: grid;
      grid-template-areas: 
        "sidebar header header"
        "sidebar main right"
        "sidebar footer footer";
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 280px 1fr 350px;
      min-height: 95vh;
      background: white;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    }
    
    /* Sidebar */
    .sidebar {
      grid-area: sidebar;
      background: linear-gradient(180deg, var(--dark), #0f172a);
      color: white;
      padding: 2rem;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .nav-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      margin-bottom: 0.5rem;
      border-radius: 12px;
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .nav-item:hover, .nav-item.active {
      background: rgba(255, 255, 255, 0.1);
    }
    
    /* Header */
    .header {
      grid-area: header;
      background: white;
      padding: 2rem;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .search-bar {
      flex: 1;
      max-width: 400px;
      position: relative;
    }
    
    .search-bar input {
      width: 100%;
      padding: 0.8rem 1rem 0.8rem 2.5rem;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 1rem;
    }
    
    .user-menu {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    /* Main Content */
    .main {
      grid-area: main;
      padding: 2rem;
      background: var(--light);
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .stat-card {
      background: white;
      padding: 1.5rem;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      border-left: 4px solid var(--primary);
    }
    
    .chart-container {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      margin-bottom: 2rem;
    }
    
    /* Right Panel */
    .right-panel {
      grid-area: right;
      padding: 2rem;
      background: white;
      border-left: 1px solid #e2e8f0;
    }
    
    .activity-list {
      margin-top: 1rem;
    }
    
    .activity-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    
    /* Footer */
    .footer {
      grid-area: footer;
      background: var(--dark);
      color: white;
      padding: 1.5rem 2rem;
      text-align: center;
    }
    
    /* Responsive */
    @media (max-width: 1200px) {
      .dashboard {
        grid-template-areas: 
          "sidebar header"
          "sidebar main"
          "sidebar right"
          "sidebar footer";
        grid-template-columns: 250px 1fr;
      }
    }
    
    @media (max-width: 768px) {
      .dashboard {
        grid-template-areas: 
          "header"
          "main"
          "right"
          "footer";
        grid-template-columns: 1fr;
      }
      
      .sidebar {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="logo">🚀 Dashboard</div>
      <div class="nav-item active">
        <span>📊</span>
        <span>Dashboard</span>
      </div>
      <div class="nav-item">
        <span>👥</span>
        <span>Team</span>
      </div>
      <div class="nav-item">
        <span>📁</span>
        <span>Projects</span>
      </div>
      <div class="nav-item">
        <span>📅</span>
        <span>Calendar</span>
      </div>
      <div class="nav-item">
        <span>📈</span>
        <span>Analytics</span>
      </div>
      <div class="nav-item">
        <span>⚙️</span>
        <span>Settings</span>
      </div>
    </aside>

    <!-- Header -->
    <header class="header">
      <h1>Welcome back, Sarah! 👋</h1>
      <div class="search-bar">
        <input type="text" placeholder="Search...">
      </div>
      <div class="user-menu">
        <div class="avatar">SD</div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main">
      <div class="stats-grid">
        <div class="stat-card">
          <h3>Revenue</h3>
          <p style="font-size: 2rem; font-weight: bold; color: var(--success);">$12,458</p>
          <p style="color: var(--success);">↑ 12% from last month</p>
        </div>
        <div class="stat-card">
          <h3>Users</h3>
          <p style="font-size: 2rem; font-weight: bold; color: var(--primary);">1,248</p>
          <p style="color: var(--primary);">↑ 8% from last month</p>
        </div>
        <div class="stat-card">
          <h3>Conversion</h3>
          <p style="font-size: 2rem; font-weight: bold; color: var(--accent);">4.8%</p>
          <p style="color: var(--accent);">↑ 2.1% from last month</p>
        </div>
      </div>
      
      <div class="chart-container">
        <h3>Performance Metrics</h3>
        <div style="height: 200px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 12px; margin-top: 1rem; display: flex; align-items: center; justify-content: center; color: white;">
          Interactive Chart Area
        </div>
      </div>
    </main>

    <!-- Right Panel -->
    <aside class="right-panel">
      <h3>Recent Activity</h3>
      <div class="activity-list">
        <div class="activity-item">
          <span>👤</span>
          <div>
            <p>New user registration</p>
            <small>2 minutes ago</small>
          </div>
        </div>
        <div class="activity-item">
          <span>💰</span>
          <div>
            <p>Payment received</p>
            <small>1 hour ago</small>
          </div>
        </div>
        <div class="activity-item">
          <span>📊</span>
          <div>
            <p>Report generated</p>
            <small>3 hours ago</small>
          </div>
        </div>
      </div>
    </aside>

    <!-- Footer -->
    <footer class="footer">
      <p>&copy; 2024 Modern Dashboard. Built with CSS Grid Holy Grail layout.</p>
    </footer>
  </div>
</body>
</html>

Best Practices & Pro Tips

✅ Recommended Approaches

  • Use CSS Grid for complex layouts with precise control
  • Use Flexbox for simpler layouts or when you need flexibility
  • Implement mobile-first responsive design
  • Use semantic HTML5 elements (header, main, aside, footer)
  • Test on real devices and multiple screen sizes
  • Consider accessibility and keyboard navigation

❌ Common Mistakes

  • Using fixed heights that break on content changes
  • Forgetting to test on mobile devices
  • Overcomplicating with unnecessary JavaScript
  • Ignoring browser support for older browsers
  • Using non-semantic div soup instead of proper HTML5
  • Not considering performance on low-end devices

🎯 When to Use Each Approach

Use CSS Grid When:

  • You need two-dimensional layout control
  • Precise placement of elements is required
  • Working with complex dashboard layouts
  • You want to use grid-template-areas for clarity

Use Flexbox When:

  • You need one-dimensional layouts (rows or columns)
  • Working with simpler content structures
  • You need flexible content distribution
  • Browser support for older browsers is critical

Ready to Build Your Holy Grail? 🏆

Experiment with our comprehensive examples and create your own perfect layouts. From classic three-column designs to modern dashboards, the holy grail pattern is your foundation for amazing web experiences.

< PreviousNext >