Holy Grail Layout（聖杯レイアウト）とは

このような5つの部分からなるレイアウトです。

実現

このレイアウトを実現する w3 の validator でエラーもワーニングも出ない最短の HTML を目指します。

CSS Grid で 3 x 3 のグリッドを作って実現します。
HEADER と FOOTER の高さは 32px にしてあります。
NAV と ASIDE の幅は 300px にしてあります。

<!DOCTYPE html>
<html lang=zxx>
<title>Title</title>

<style>
html {
	height					: 100%
}
body {
	height					: 100%
;	margin					: 0
;	display					: grid
;	grid-template-rows		: 32px 1fr 32px
;	grid-template-columns	: 300px 1fr 300px
}
header {
	grid-column				: 1 / 4
}
footer {
	grid-column				: 1 / 4
}
</style>

<header>	HEADER	</header>
<nav>		NAV		</nav>
<main>		MAIN	</main>
<aside>		ASIDE	</aside>
<footer>	FOOTER	</footer>

勘所

html 要素と body 要素の高さを 100% にします。

Grid 要素はその子要素を自動的に流し込んでくれます。なので、3カラムに跨がるheader 要素と footer 要素のみ指定すれば大丈夫です。

最後に

もっと違う方法があれば教えてください。興味をもっていただきありがとうございました。