display-gridを使用してレイアウト調整

前提・実現したいこと

display-gridを使用してレイアウトを調整したい

発生している問題・エラーメッセージ

dreamwaverでコードを書いていたら、grid-template-columnsの部分にExpected RBRACE、
grid-template-rowsの部分にUnexpected token '['とエラー表示がされます

該当のソースコード

<body>
	<header>
		WAVE
	</header>
	<nav>
		<ul>
			<li>
				<a href="index.html">トップ</a>
			</li>
			<li>
				<a href="about.html">サイトについて</a>
			</li>
			<li>
				<a href="contact.html">お問い合わせ</a>
			</li>
		</ul>
	</nav>
	<figure>
		<img alt="快適な室内空間" src="img/room.jpg">
	</figure>
	<h1>Best Place to visit in the world</h1>
	<p><a href="#">空間を彩る多彩なアイテム</a></p>
	<section>
		<article>
			<a href="post01.html">
			<figure>
				<img alt="" src="img/note.jpg">
			</figure>
			<h2>スケッチが楽しくなるノート</h2></a>
		</article>
		<article>
			<a href="post02.html">
			<figure>
				<img alt="" src="img/plant.jpg">
			</figure>
			<h2>緑のアクセントならこれ</h2></a>
		</article>
		<article>
			<a href="post03.html">
			<figure>
				<img alt="" src="img/items.jpg">
			</figure>
			<h2>小物と飾り棚の組み合わせ</h2></a>
		</article>
		<article>
			<a href="post04.html">
			<figure>
				<img alt="" src="img/chair.jpg">
			</figure>
			<h2>居心地のいい部屋にあるもの</h2></a>
		</article>
	</section>
	<footer>
		© WAVE
	</footer>
</body>

* {
	margin: 0;
}
img {
	width: 100%;
	height: auto;
}
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head] 100px 
		[titile] auto 
		[sub] auto 
		[recent] auto 
		[foot] 100px;
	grid-row-gap: 20px;
	row-gap: 20px;
}
body > * {
	grid-colum: 2 / -2;
}