CSS3

プロパティ

grid-template-areas

→●、mdn

グリッドの有名区画設定。

このプロパティは、一連の 有名区画 を指定する。それらの区画は、ある特定の格子アイテムには結び付けられないが、格子配置プロパティから 名前を通して参照できるものになる。 grid-template-areas プロパティの構文は、格子構造の可視化も供し、格子コンテナの全体的なレイアウトを理解し易くする。

none

このプロパティからは、有名区画は定義されない ― したがって明示的な格子を成す筋も定義されない ― ことを指示する（それでも、明示的な格子筋は grid-template-columns／grid-template-rows プロパティにより作成され得る）。

注記： 明示的な格子が無い下では、どの［row／column］も 暗黙的に生成され、それらのサイズは［grid-auto-rows／grid-auto-columns］プロパティから決定されることになる。

<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:none;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<string>+ ○

区画のリストされた個々の CSS 文字列ごとに、1 本の row が作成される。

各文字列は、次に従って構文解析した上で、その中の各 升トークン ― 有名升トークン／null 升トークン ― が【出現した順に】 row の中の 1 個の升に対応する。各升ごとに【各 row 内の、同じ位置に在る升の集合ごとに】、対応する column が作成される：

各文字列は、最長合致に基づいて、次に挙げるトークンからなるリストにトークン化されることになる：

⮡ 識別子符号位置のみからなる並び：

有名升トークン を表現する。その並びがそのまま名前を与える。同じ名前を共有する有名升トークンの集合は、［それらのトークンに対応する升すべてにスパンする、1 個の有名区画］を作成する。

⮡ "."（U+002E FULL STOP）のみからなる並び：

null 升トークン を表現する。それは、格子コンテナの中の無名区画を表現する。

⮡ 空白のみからなる並び：

何も表現しない（トークンは生産しない）。

⮡ その他の文字のみからなる並び：

trash トークン を表現する。これは、構文エラーであり、宣言は無効になる。

注記： 有名升トークンは、<ident> 構文に合致しない升名も生産し得る ― "1st 2nd 3rd" を与えた場合など。そのような区画を他のプロパティから名前で参照する際には、エスケープを要する ― 例えば、名前 1st の区画を参照するときは、次の様に：

grid-row: \31st;

すべての文字列は、［1 個以上かつ互いに同じ個数］の升トークンを定義しなければならない ― さもなければ宣言は無効になる。

有名区画を成す升の集合が、単独の、穴の無い矩形を形成していない場合、宣言は無効になる。

注記： このモジュールの将来バージョンでは、矩形でない、あるいは単連結でない領域も許可され得る。

<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:
	'a b c'
	'd e f'
	'g g g';
">
 <DIV style="grid-column-start:a; border:1px solid black">1</DIV>
 <DIV style="grid-column:b/c; border:1px solid black">2</DIV>
 <DIV style="grid-row:d/g; border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

#grid {
  display: grid;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ...."
}
#grid > header { grid-area: head; }
#grid > nav    { grid-area: nav; }
#grid > main   { grid-area: main; }
#grid > footer { grid-area: foot; }

テスト