🏆 Holy Grail Layout

The classic 5-section layout: Header, Left Sidebar, Main, Right Sidebar, Footer
1. Basic Holy Grail Layout
Header, left sidebar, main content, right sidebar, footer — all with CSS Grid.
📌 HEADER
📁 LEFT SIDEBAR
Navigation
📄 MAIN CONTENT
This is the primary content area.
📌 RIGHT SIDEBAR
Ads / Related
📞 FOOTER
.holygrail {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar-left main sidebar-right"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
    min-height: 100vh;
}
2. Holy Grail with Real Content
A practical example with navigation menu, blog post, and author sidebar.
📝 My Awesome Blog

Understanding the Holy Grail Layout

The Holy Grail layout is a classic web design pattern that includes a header, footer, two sidebars, and a main content area. It was historically difficult to achieve with CSS floats and positioning, but CSS Grid makes it simple.

With grid-template-areas, you can visually map out your layout in CSS. The name "Holy Grail" comes from the fact that this layout was highly sought after and difficult to achieve.

📌 About the Author

Front-end developer learning CSS Grid and modern web design.

📌 Related Posts

CSS Grid Guide
Flexbox Tutorial
Responsive Design

📌 Follow Me

Twitter • GitHub • LinkedIn

© 2025 My Awesome Blog | Built with CSS Grid
.holygrail-2 {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 220px 1fr 250px;
    gap: 20px;
}
3. Responsive Holy Grail (Mobile First)
On mobile: stacks vertically. On desktop: full Holy Grail layout. Resize your browser!
📌 HEADER
📁 LEFT SIDEBAR
(Stacks first on mobile)
📄 MAIN CONTENT
This appears after left sidebar on mobile
📌 RIGHT SIDEBAR
Stacks after main on mobile
📞 FOOTER
/* Mobile first: 1 column */
.holygrail-3 {
    display: grid;
    grid-template-areas:
        "header"
        "sidebar-left"
        "main"
        "sidebar-right"
        "footer";
    gap: 20px;
}

/* Desktop: Holy Grail */
@media (min-width: 768px) {
    .holygrail-3 {
        grid-template-areas:
            "header header header"
            "sidebar-left main sidebar-right"
            "footer footer footer";
        grid-template-columns: 200px 1fr 200px;
    }
}
💡 Mobile First! The layout starts as single column on mobile, then transforms into Holy Grail on desktop.
4. Blog Style (Main + Sidebar)
A simpler version: header, main content with sidebar, footer. Perfect for blogs.

My Dev Blog

Thoughts on coding, design, and learning

Why CSS Grid Changes Everything

📅 May 15, 2026 | 📖 5 min read

CSS Grid finally makes complex layouts simple. Unlike floats or flexbox alone, Grid handles both rows and columns simultaneously...

The Holy Grail layout used to require complicated hacks. Now it's just a few lines of CSS. This is why Grid is essential for modern web development.

📌 About

Front-end developer documenting my learning journey.

📌 Categories

📌 Recent Posts

© 2026 My Dev Blog | Built with CSS Grid Holy Grail
.holygrail-4 {
    display: grid;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    grid-template-columns: 1fr 300px;
    gap: 30px;
}
🏆 Why "Holy Grail"?
The Holy Grail layout was famously difficult to achieve with older CSS methods (floats, tables, positioning). Developers searched for this perfect layout like the mythical Holy Grail. CSS Grid finally makes it simple.
/* Old way (painful) */ /* Floats, clearfix hacks, negative margins, min-height, etc. */ /* New way (CSS Grid) */ .holygrail { display: grid; grid-template-areas: "header header header" "sidebar-left main sidebar-right" "footer footer footer"; grid-template-columns: 200px 1fr 200px; gap: 20px; }
📚 Holy Grail Cheat Sheet
/* =================================== STANDARD HOLY GRAIL (Desktop) =================================== */ .holygrail { display: grid; grid-template-areas: "header header header" "sidebar-left main sidebar-right" "footer footer footer"; grid-template-columns: 250px 1fr 250px; gap: 20px; min-height: 100vh; } /* =================================== RESPONSIVE HOLY GRAIL =================================== */ .holygrail { display: grid; grid-template-areas: "header" "sidebar-left" "main" "sidebar-right" "footer"; gap: 20px; } @media (min-width: 768px) { .holygrail { grid-template-areas: "header header header" "sidebar-left main sidebar-right" "footer footer footer"; grid-template-columns: 200px 1fr 200px; } } /* =================================== SIMPLE BLOG VERSION =================================== */ .blog { display: grid; grid-template-areas: "header header" "main sidebar" "footer footer"; grid-template-columns: 1fr 300px; gap: 30px; }
🧠 Quick Quiz
/* Question 1: What are the 5 main sections of a Holy Grail layout? */ /* Answer: Header, Left Sidebar, Main, Right Sidebar, Footer */ /* Question 2: Why is it called "Holy Grail"? */ /* Answer: It was very difficult to achieve with older CSS methods */ /* Question 3: How do you make a Holy Grail layout responsive? */ /* Answer: Use media queries to change grid-template-areas */ /* Question 4: What's the difference between Holy Grail and a simple blog layout? */ /* Answer: Holy Grail has TWO sidebars; blog layout has ONE sidebar */