How to create holy grail layout with flexbox

CssHow-ToBeginner · 3 min read

Holy Grail Layout with Flexbox: Simple CSS Guide

To create a holy grail layout with flexbox, use a container with display: flex; and three child sections: a fixed-width left sidebar, a flexible main content area, and a fixed-width right sidebar. Set the container to full width and height, and use flex-grow on the main content to fill available space.

📐

Syntax

The holy grail layout with flexbox uses a container with display: flex; to arrange three sections horizontally. The left and right sidebars have fixed widths, while the main content grows to fill the remaining space.

display: flex; makes the container a flex container.
flex-grow: 1; on the main content lets it expand.
Fixed widths on sidebars keep them stable.
Use min-height: 100vh; on the container for full viewport height.

css

body, html {
  margin: 0;
  height: 100%;
}
.container {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 200px;
  background-color: #ccc;
}
.main {
  flex-grow: 1;
  background-color: #eee;
}

💻

Example

This example shows a holy grail layout with a left sidebar, main content area, and right sidebar. The sidebars have fixed widths, and the main content fills the space between them.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Holy Grail Layout with Flexbox</title>
<style>
  body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
  }
  .container {
    display: flex;
    min-height: 100vh;
  }
  .sidebar {
    width: 200px;
    background-color: #8ca0ff;
    color: white;
    padding: 1rem;
  }
  .main {
    flex-grow: 1;
    background-color: #f0f0f0;
    padding: 1rem;
  }
  .right-sidebar {
    width: 150px;
    background-color: #ff8c8c;
    color: white;
    padding: 1rem;
  }
</style>
</head>
<body>
  <div class="container">
    <aside class="sidebar" aria-label="Left sidebar">
      Left Sidebar
    </aside>
    <main class="main">
      Main Content Area
    </main>
    <aside class="right-sidebar" aria-label="Right sidebar">
      Right Sidebar
    </aside>
  </div>
</body>
</html>

Output

A full-height page with a blue left sidebar 200px wide, a gray main content area filling the center, and a red right sidebar 150px wide, all arranged horizontally.

⚠️

Common Pitfalls

Common mistakes when creating the holy grail layout with flexbox include:

Not setting flex-grow: 1; on the main content, causing it not to expand.
Using fixed widths on the main content instead of flexible growth.
Forgetting to set the container height, so the layout does not fill the viewport.
Not using semantic HTML elements like <main> and <aside> for accessibility.

css

/* Wrong: main content fixed width, no flex-grow */
.container {
  display: flex;
  min-height: 100vh;
}
.main {
  width: 600px; /* fixed width prevents flexible layout */
}

/* Right: main content flex-grow to fill space */
.main {
  flex-grow: 1;
  min-width: 0; /* prevents overflow */
}

📊

Quick Reference

Use display: flex; on the container to arrange children horizontally.
Set fixed widths on sidebars with width.
Apply flex-grow: 1; on the main content to fill remaining space.
Use semantic elements: <aside> for sidebars, <main> for content.
Set container height to 100vh for full viewport height.

✅

Key Takeaways

Use a flex container with three children for the holy grail layout.

Set fixed widths on sidebars and flex-grow on main content to fill space.

Ensure the container fills the viewport height with min-height: 100vh.

Use semantic HTML elements for better accessibility.

Avoid fixed widths on main content to keep layout flexible and responsive.