grid-template-areas

grid-template-areas は、グリッドのマスの並びを文字で描いて、マスの範囲に名前を付けます。項目に grid-area: 名前と書くと、その範囲に置かれます。

構文

none | <string>+

headsidemainfoot

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: grid;
  grid-template-areas: "head head" "side main" "foot foot";
}

grid-template-areas"head head" "side main" "foot foot"

none名前を書く

行3

列2

マスごとの範囲の名前（「.」はどの範囲にも入らないマス）

headsidemainfoot

none：初期値です。範囲に名前を付けません。
1 行を 1 つの文字列（"head head" のように引用符で囲んだもの）で書き、行の数だけ並べます。文字列の中では、マスごとの名前を空白で区切ります。同じ名前を並べたマスが 1 つの範囲になります。
.（いくつか続けても同じ）は、どの範囲にも入らないマスです。
どの行もマスの数をそろえ、同じ名前のマスは長方形にまとめます。L 字や飛び地になると、宣言ごと無効になります。

文字列の数とマスの数で、行と列の数も決まります。行の高さや列の幅は grid-template-rows・grid-template-columns で決め、書かなければ中身に合わせた大きさ（auto）になります。

このページのプレビューは、補助の宣言で箱を display: grid にしています。見本の 4 つの項目には、それぞれ grid-area: head・side・main・foot を書いています（コードには出していません）。

ヘッダー・サイドバー・本文・フッターのような、ページの骨組みを作るときに使います。メディアクエリで文字列だけを書き換えれば、HTML の順番を変えずに、狭い画面では縦に積み、広い画面ではサイドバーを横に並べる、といった並べ替えができます。

範囲に名前を付けると、その範囲の線に head-start・head-end という名前も付きます。grid-column: head-start / head-end のように、線の名前としても使えます。
項目に書いた名前の範囲が無いときは、その項目は増やした行と列の外側に置かれます。名前の書き間違いに気をつけます。
並べ替えても読み上げやキーボードで移る順番は HTML の順番のままなので、見た目の順番と大きく変えないようにします。