Classic Holy Grail Layout

Classic holy grail layout is a three-column layout with a header and footer, where:

Header spans the full width at the top
Footer spans the full width at the bottom
Main content is in the center, taking up most of the width
Left and right sidebars (e.g., navigation and ads or widgets) are fixed-width columns flanking the main content
The layout is flexible and responsive

Why "Holy Grail"?

It is called the Holy Grail layout because of the method of its implementation, a comprehensive structure for webpage layout that provides the essential components needed for most webpages, using CSS techniques to achieve equal heights of the multiple content columns.

 

	h left
	h middle
	h right
	m left
	m middle
	m right
	f left
	f middle
	f right



	h span
	m left
	m middle
	m right
	f span

HTML
CSS

<div class="classic-holy-grail | text-center | *:p-1 *:border-r *:border-b *:border-dashed  [&>*:nth-child(3n+3)]:border-r-0 [&>*:nth-last-child(-n+3)]:border-b-0">
	<div>h left</div>
	<div>h middle</div>
	<div>h right</div>
	<div>m left</div>
	<div>m middle</div>
	<div>m right</div>
	<div>f left</div>
	<div>f middle</div>
	<div>f right</div>
</div>
<hr class="my-4"/>
<div class="classic-holy-grail | text-center | *:p-1 *:border-dashed">
	<div class="classic-holy-grail-full-width | border-b">h span</div>
	<div class="border-r border-b">m left</div>
	<div class="border-r border-b">m middle</div>
	<div class="border-b">m right</div>
	<div class="classic-holy-grail-full-width">f span</div>
</div>

.classic-holy-grail {
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto
}

.classic-holy-grail-full-width {
	grid-column: 1 / -1;
}