grid-template-areasとgrid-areaを使ったレイアウト配置

「グリッドアイテムの配置」でgrid-column・ grid-row でグリッド線を指定するアイテム配置方法をお伝えしましたが、今回はエリアに名前をつけて配置するレイアウト方法です。

使用するプロパティは、grid-template-areasとgrid-area。

grid-template-areasとgrid-area

grid-template-areasは、gridで作成する１行ごとに名前を指定するので、複雑な指定が必要なレイアウトよりもサイト構成など大きく少なく指定できるレイアウトに向いています。

サンプルで、典型的なヘッダー・グローバルナビ・メイン・サイド・フッターからなる構成を作ってみます。
仕上がりイメージはこうです。（分かりやすくグリッドに枠線をつけています）

#{
 display: grid;
 grid-template-columns: 20% 80%;
 grid-template-rows: 100px 50px 400px 80px;
}

まず基本のgrid設定から。

これで、２列・４行のgrid枠が出来ました。
ここにgrid-template-areasプロパティで、一行ごとに任意の名前をつけていきます。

例えば　header navi side main footer と名前をつけるとして次のような指定となります。

#{
  grid-template-areas: 
 	"header header"　/*　1行目の2枠は両方headerに使う　*/
 	"navi navi"　/*　2行目の2枠は両方naviに使う　*/
 	"side main"　/* 3行目の1枠目はside、2枠目はmainに使う　*/
 	"footer footer" ;　/*　4行目の2枠は両方footerに使う　*/
 }

２列×４行で８つのセルがあるわけなので、エリア名も８つ指定します。名前が不要な場合はピリオド（ . ）を１つ以上打ちます。１つでも良いです。（例　” . header”　）

(エリア名の指定が無いと、grid-areaによる配置は出来ませんが、grid-column (grid-row)による配置は通常通り可能です。)

これで各セルに名前が振り分けられました。
そしてgridアイテムの配置には「grid-area」プロパティを使い、先ほど振り分けたエリア名を指定します。

#header{
  grid-area: header;
}

#nav{
 grid-area: navi;
}

#side{
 grid-area: side;
}

これでgridアイテムの配置完了です。

codepenにもサンプルを載せておきました。
先ほど作ったサンプルと同じですが、mainにもdisplay:gridを指定した入れ子構造にしています。

See the Pen grid-layout sample by Takashi Abe (@TakeshiAbe) on CodePen.