Holy Grail Layout

Download demo See demo

You certainly already know this layout. The Holy Grail layout is defined as:

The Holy Grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail.

Wikipedia

Defining the Holy Grail

From the Wikipedia summary, and lot of other researches to find the good way to implement this layout, we are looking for something like that:

  • Sidebars and main content should have the same height, regardless of which element is the tallest,
  • Sidebars should have fixed width and main content fluid width,
  • The center column (main content) should appear first in the HTML source,
  • If the content is sparse, the footer should stay to the bottom of the page,
  • Use a minimal markup and CSS.

Let's code this

First at all, you need to build a basic HTML markup. I propose to you this one, but feel free to adapt or improve regarding your real needs.

HTML

<body class="holy-grail">
	<header>
		<!-- header content -->
	</header>

	<div class="holy-grail-body">

		<section class="holy-grail-content">
			<!-- Main page content -->
		</section>

		<div class="holy-grail-sidebar-1 hg-sidebar">
			<!-- sidebar 1 content -->
		</div>

		<div class="holy-grail-sidebar-2 hg-sidebar">
			<!-- sidebar 2 content -->
		</div>

	</div>

	<footer>
		<!-- footer content -->
	</footer>
</body>

I used explicit classes to make my code easier to read, I suggest you to do so, for you and your team, or for your new you in 6 months!

CSS

To be clear: today, your website has to be responsive. That's why the CSS code I'll propose you is mobile first responsive.

/**
 * Make body at least 100% height
 * You can also use a combination
 * of height: 100% in <html> and
 * min-height: 100% in <body>.
 */
.holy-grail {
	min-height: 100vh;
}

/**
 * Let's do a column distribution
 * (mobile first)
 * flex value is 1 1 auto to make
 * body skrinkable and extensible
 */
.holy-grail,
.holy-grail-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/**
 * Content body item is made
 * extensible too.
 */
.holy-grail-content {
	flex: 1 1 auto;
}

/**
 * Put the first sidebar before content.
 * If you need sidebar to be before content
 * only in big screen put those 3 next lines
 * in @media block.
 */
.holy-grail-sidebar-1 {
	order: -1;
}

/**
 * Let's introduce bigger screen
 */

@media (min-width: 768px) {
	/**
	 * Body items are now side by side
	 */
	.holy-grail-body {
		flex-direction: row;
	}

	/**
	 * Sidebars have a basic 260 width
	 * and are not really flexible anymore
	 */
	.hg-sidebar {
		flex: 0 0 260px;
	}
}

I hope these comments will help you understand this very short code. You see now how Holy Grail Layout is at your fingertips.

You may now improve this kick-start CSS code introducing more precise break points you need in order to build your perfect website.