Holy Grail Left Sidebar Right Sidebar 1 Column 2 Columns 3 Columns 4 Columns 5 Columns 6 Columns 7 Columns 8 Columns

Matthew James Taylor Matthew James Taylor

Web design ›

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

17 Jan 2022 — Updated 27 Mar 2023

Holy grail 3 column layout responsive diagram

Table of contents

What Is The "Holy Grail" Website Layout?

The "holy grail" website layout refers to a specific type of web design layout that is often sought after by web designers and developers. It comprises a header section at the top, a footer section at the bottom, and three columns in the middle, with the main content flanked by two sidebars.

The sidebars are for navigation menus, advertisements, or other types of content.

A responsive holy grail layout collapses into a single column of content areas for mobile devices, and on tablet, the sidebars appear side-by-side below a full-width main content column.

In this article, I will show how to build the responsive holy grail layout by using six different methods; CSS grid, flexbox, Responsive Attributes, Responsive Columns, floated blocks, and tables. Which version you choose will depend on your browser compatibility requirements and which methods you're more comfortable with.

Holy Grail Responsive 3-Column Layout (CSS Grid)

To create the holy grail layout with CSS grid, we name our grid areas, assign each column to its correct area, then change the layout of grid areas at each breakpoint.

Live CSS grid demo

Header
Main content
Left sidebar
Right sidebar
Footer

Semantic HTML5 markup

I'm using HTML tags that make the most sense for each part of the layout but you can use whatever elements make the most sense for your situation.

I recommend custom elements instead of divs. See why they're so much better in my article: Replace Divs With Custom Elements For Superior Markup.

<div class="holy-grail-grid">
    <header class="header">Header</header>
    <main class="main-content">Main content</main>
    <section class="left-sidebar">Left sidebar</section>
    <aside class="right-sidebar">Right sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

I'm using classes above, but would ID's be better? See this article for the answer: ID vs Class: Which CSS Selector Should You Use?.

The CSS

/* grid container */
.holy-grail-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}

/* general column padding */
.holy-grail-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.holy-grail-grid > .header {
    grid-area:header;
    background:#f97171;
}
.holy-grail-grid > .main-content {
    grid-area:main-content;
    background:#fff;
}
.holy-grail-grid > .left-sidebar {
    grid-area:left-sidebar;
    background:#f5d55f;
}
.holy-grail-grid > .right-sidebar {
    grid-area:right-sidebar;
    background:#c5ed77;
}
.holy-grail-grid > .footer {
    grid-area:footer;
    background:#72c2f1;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}

Layout features

Want a bottom footer?

Push your footer to the bottom of the page when you have minimal content with this easy upgrade:

CSS grid browser support

CSS grid has over 96% browser support so it's acceptable to use in production environments (source).

Add responsive font size

Use my special formula to make your font size respond to screen size just like your layout:

html {
    font-size: calc(15px + 0.390625vw);
}

See my article for details: Responsive Font Size (Optimal Text at Every Breakpoint).

Holy Grail Responsive 3-Column Layout (Flexbox)

To create the holy grail layout with flexbox, we wrap our columns into three lines and adjust the width of each column at the different breakpoints. We also redefine the order of each column so the main content comes before the sidebars in the HTML source of the page.

Live flexbox demo

Header
Main content
Left sidebar
Right sidebar
Footer

Semantic HTML5 markup

I'm using HTML tags that make the most sense for each part of the layout but you can use whatever elements make the most sense for your situation.

I recommend trying custom tags instead of divs. But before using them, read my article first: Custom HTML Tags (18 Things To Know Before Using Them).

<div class="holy-grail-flexbox">
    <header class="header">Header</header>
    <main class="main-content">Main content</main>
    <section class="left-sidebar">Left sidebar</section>
    <aside class="right-sidebar">Right sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

The CSS

/* set correct box model */
* {
    box-sizing:border-box;
}

/* flexbox container */
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
    width:100%;
    padding:1rem;
}

/* background colors */
.holy-grail-flexbox > .header {background:#f97171}
.holy-grail-flexbox > .main-content {background:#fff}
.holy-grail-flexbox > .left-sidebar {background:#f5d55f}
.holy-grail-flexbox > .right-sidebar {background:#c5ed77}
.holy-grail-flexbox > .footer {background:#72c2f1}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:50%;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .header {
        order:-2; /* header first */
    }
    .holy-grail-flexbox > .left-sidebar {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main-content {
        width:50%;
    }
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:25%;
    }
}

Layout features

Add responsive padding

Use my special formula padding:calc(8px + 1.5625vw); to make your whitespace respond to screen size! See my article for details: Responsive Padding, Margin & Gutters With CSS Calc.

Flexbox browser support

Flexbox has over 98% browser support so it's more than acceptable to use in production environments (source).

Holy Grail 3-Column Layout (Responsive Attributes)

Responsive Attributes is a CSS Grid-based layout system that I developed, it allows anyone to build advanced responsive layouts with just simple HTML.

See my Responsive Attributes documentation to see how easy and powerful it is to use.

Live Responsive Attributes demo

Header
Main content
Left sidebar
Right sidebar
Footer

HTML markup with data-attribute breakpoints

Responsive Attributes works by adding simple data-attributes to any HTML element to define grid-based columns for each breakpoint.

Here's how easy it is to create the holy grail layout:

<main data-sm="1column" data-md="2column" data-lg="4column">
    <header data-sm="pad" data-md="colspan2" data-lg="colspan4 order1">
        Header
    </header>
    <article data-sm="pad row" data-md="colspan2">
        Main content
    </article>
    <section data-sm="pad" data-lg="order2">
        Left sidebar
    </section>
    <aside data-sm="pad">
        Right sidebar
    </aside>
    <footer data-sm="pad" data-md="colspan2" data-lg="colspan4">
        Footer
    </footer>
</main>

No CSS required!

All the structure and responsive styles of Responsive Attributes are handled by a single tiny CSS file that's less than 1kb! It's so easy to include it in any project.

Download Responsive Attributes and start experimenting.

Layout features

Responsive Attributes browser support

Responsive Attributes uses CSS grid under the hood. Grid has over 96% browser support so it's acceptable for use in production environments (source).

Holy Grail 3-Column Layout (Responsive Columns)

Responsive Columns is a layout system that I developed where advanced responsive layouts can be coded with custom HTML tags and no extra CSS is required.

See my Responsive Columns documentation to see how quick and powerful it is to use.

Live Responsive Columns demo

Header Main content Left sidebar Right sidebar Footer

HTML markup with custom elements

By default, Responsive Columns works with tiny custom elements and attributes to define any responsive layout.

<r-c>
    <c1-1 lg1>Header</c1-1>
    <c1-1 lg1-2>Main Content</c1-1>
    <c1-1 sm1-2 lg1-4 lg2>Left Sidebar</c1-1>
    <c1-1 sm1-2 lg1-4>Right Sidebar</c1-1>
    <c1-1>Footer</c1-1>
</r-c>

Optional semantic HTML5 markup

You can also use Responsive Columns with semantic HTML elements by adding data-attributes to specify your layout.

<main data-r-c data-join>
    <header data-lg1>Header</header>
    <article data-lg1-2>Main content</article>
    <section data-sm1-2 data-lg1-4 data-lg2>Left sidebar</section>
    <aside data-sm1-2 data-lg1-4>Right sidebar</aside>
    <footer>Footer</footer>
</main>

No CSS required!

All the structure and responsive styles of Responsive Columns are handled by a single tiny CSS file that is easy to include in any project.

Download Responsive Columns and start experimenting.

Layout features

Responsive Columns browser support

Responsive Columns uses flexbox under the hood. Flexbox has over 98% browser support so it's more than acceptable to use in production environments (source).

Holy Grail Responsive 3-Column Layout (Floated Blocks)

We can create the holy grail layout with only floated blocks by nesting a set of offset containers to create the columns.

Live floated blocks demo

Header
Main content
Left sidebar
Right sidebar
Footer

Semantic HTML5 markup

I'm using HTML tags that make the most sense for each part of the layout but you can use whatever elements make the most sense for your situation.

<div class="holy-grail-floated-blocks">
    <header class="header">Header</header>
    <div class="right-wrap">
        <div class="main-wrap">
            <div class="left-wrap">
                <main class="main-content">Main content</main>
                <section class="left-sidebar">Left sidebar</section>
                <aside class="right-sidebar">Right sidebar</aside>
            </div>
        </div>
    </div>
    <footer class="footer">Footer</footer>
</div>

The CSS

/* set correct box model */
* {
    box-sizing:border-box;
}

/* floated container */
.holy-grail-floated-blocks {
    overflow:hidden;
}
/* stacked columns on mobile */
.holy-grail-floated-blocks .header {
    padding:1rem;
    background:#f97171;
}
.holy-grail-floated-blocks .main-content {
    padding:1rem;
    background:#fff;
}
.holy-grail-floated-blocks .left-sidebar {
    padding:1rem;
    background:#f5d55f;
}
.holy-grail-floated-blocks .right-sidebar {
    padding:1rem;
    background:#c5ed77;
}
.holy-grail-floated-blocks .footer {
    padding:1rem;
    background:#72c2f1;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-floated-blocks .right-wrap {
        float:left;
        width:100%;
        background:#c5ed77;
    }
    .holy-grail-floated-blocks .main-wrap {
        float:left;
        width:100%;
        background:#f5d55f;
        position:relative;
        right:50%;
    }
    .holy-grail-floated-blocks .left-wrap {
        float:left;
        width:100%;
        position:relative;
        left:50%;
    }
    .holy-grail-floated-blocks .main-content {
        float:left;
        width:100%;
    }
    .holy-grail-floated-blocks .left-sidebar {
        clear:both;
        float:left;
        width:50%;
        background:none;
    }
    .holy-grail-floated-blocks .right-sidebar {
        width:50%;
        float:right;
        background:none;
    }
    .holy-grail-floated-blocks .footer {
        clear:both;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-floated-blocks .main-wrap {
        right:25%;
        background:#fff;
    }
    .holy-grail-floated-blocks .left-wrap {
        left:auto;
        right:50%;
        background:#f5d55f;
    }
    .holy-grail-floated-blocks .main-content {
        width:50%;
        left:100%;
        position:relative;
        left:100%;
        background:none;
    }
    .holy-grail-floated-blocks .left-sidebar {
        clear:none;
        width:25%;
        position:relative;
        left:25%;
    }
    .holy-grail-floated-blocks .right-sidebar {
        clear:none;
        width:25%;
        position:relative;
        left:75%;
    }
}

Do you know how HTML and CSS go together? See my beginner guide: How to add CSS to HTML (With Link, Embed, Import, and Inline styles).

Layout features

Browser support

The floated boxes' holy grail layout requires the box-sizing:border-box CSS property, this has over 99% browser support! (source)

Need to support even older browsers? 🧐

If you need to achieve 3 equal-height columns in old browsers (back to IE 5.5) that don't support box-sizing:border-box, you can use my nested equal-height columns method, here is an example of a 3 column layout with offsets instead of padding.

Holy Grail Static 3-Column Layout (Tables)

To create the holy grail layout with tables we lose the responsive functionality but we gain browser support.

Sometimes tables are still necessary, for example, in HTML emails.

Live table layout demo

Header
Left sidebar Main content Right sidebar
Footer

Table markup

When using tables for layout you don't require <thead> or <tbody> containers.

<table class="holy-grail-tables">
    <tr>
        <td colspan="3" class="header">Header</td>
    </tr>
    <tr>
        <td class="left-sidebar">Left sidebar</td>
        <td class="main-content">Main content</td>
        <td class="right-sidebar">Right sidebar</td>
    </tr>
        <td colspan="3" class="footer">Footer</td>
    </tr>
</table>

The CSS

If you're using this table-based layout for an HTML email you may need to inline your styles to make them work in all email clients, see how to inline CSS.

/* table container */
.holy-grail-tables {
    width:100%;
    border:0;
    border-collapse:collapse;
}

/* table cells */
.holy-grail-tables .header {
    padding:16px;
    background:#f97171;
}
.holy-grail-tables .left-sidebar {
    padding:16px;
    width:25%;
    background:#f5d55f;
}
.holy-grail-tables .main-content {
    padding:16px;
    width:50%;
    background:#fff;
}
.holy-grail-tables .right-sidebar {
    padding:16px;
    width:25%;
    background:#c5ed77;
}
.holy-grail-tables .footer {
    padding:16px;
    background:#72c2f1;
}

Layout features

Browser support for table layouts

Table layouts have over 99% browser support plus it's the only option for HTML emails.

Compatible addons

The responsive layouts in this article are fully compatible with the following:

Matthew James Taylor

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Canva

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Learn more
SiteGround

SiteGround — Best Website Hosting

Professional Wordpress hosting with 24/7 customer support that is the best in the industry, hands down!

Learn more
Ezoic

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more
Surfer SEO

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Learn more

See more of my recommended dev tools.

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

 How responsive attributes work

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

 Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

 A web developer in the engine room

Best Web Development Tools (Free & Paid)

 Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

 Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

 Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

 Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

 3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

 Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

 Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

 How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

 Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

 A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

 Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

 ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

 Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

 Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

 Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

 Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

 Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

 Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor