CSS

A way to name layout positions and arrange them visually.

grid-template-areas

grid-template-areasは、CSS Gridレイアウトの中で「どのエリアに何を配置するか」を名前で指定できる機能です。

まるで「設計図」に文字ラベルを書くように、header や main、sidebar などを使って、どの位置にどの要素を置くかを視覚的にわかりやすく定義できます。

たとえば以下のように書くと：

CSS

grid-template-areas:
	"header header"
	"sidebar main"
	"footer footer";

このようなレイアウトになります：

それぞれの要素には grid-area: header; などの名前をつけておくことで、自動的にその位置に配置されます。

ポイント：