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

grid-template-areas

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

使用するプロパティは、grid-template-areasgrid-area

grid-template-areasとgrid-area

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

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

ヘッダー
 
グローバルナビ
 
サイド
メイン

まず基本のgrid設定から。

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

これで、2列・4行の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に使う */
 }

2列×4行で8つのセルがあるわけなので、エリア名も8つ指定します。名前が不要な場合はピリオド( . )を1つ以上打ちます。1つでも良いです。(例 " . header" )

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

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

#header{
  grid-area: header;
}
#nav{
 grid-area: navi;
}
#side{
 grid-area: side;
}
#main{
 grid-area: main;
}
#footer{
 grid-area: footer;
}

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

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

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

Gridレイアウトに関する記事

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月14日HTML/CSScss,display_grid

Posted by ミフネWEB