2018.03.26 [月] CSS Grid Layoutの時代がやってくる。［その2］
前回は、CSS Grid Layoutを利用したGrid itemの配置の指定など、基本的な使い方を調べましたが、さらにGridエリアを設定してレイアウトする方法と、より実践的に利用する方法を調べてみました。
Grid itemの配置を指定する
前回、基本的なGrid lineの番号で指定することで、グリッドを定義する方法で、要素をレイアウトしました。
その他にも、エリアを設定し、名前を付けて指定する方法があります。
エリアを設定し、名前を付けて指定する
ナビゲーションのhtmlを用意します。
grid-template-areasでエリアを作り、エリア名を付けます。エリア名は自由に決める事ができます。
ul {
display: grid;
grid-template-areas:
"nav1 nav2 nav3 nav4";
}
- Nav1
- Nav2
- Nav3
- Nav4
ダブルクオーテーション（"）で囲まれた1行が、グリッドでの1行となりますので、上記のgrid-template-areasの値を2行にすると、
ul {
display: grid;
grid-template-areas:
"nav1 nav2"
"nav3 nav4";
}
- Nav1
- Nav2
- Nav3
- Nav4
このように、ブラウザでの表示も2行になります。
グリッドアイテムにエリア名を設定する
グリッドアイテムにgrid-areaを記述します。
.list1{
grid-area: nav1;
background-color: #d186de;
}
.list2{
grid-area: nav2;
}
.list3{
grid-area: nav3;
}
.list4{
grid-area: nav4;
background-color: #f5d951;
}
さらに、grid-template-areasを変更して、Nav1を2行に設定し、Nav4を2列にします。わかりやすいように、nav1とnav4の色を変更しました。
ul {
display: grid;
grid-template-areas:
"nav1 nav2 nav3"
"nav1 nav4 nav4";
}
- Nav1
- Nav2
- Nav3
- Nav4
このように、エリアの名前を半角スペースで区切ることで、グリッドの縦方向のライン（横の区切り）を表現します。エリア名を複数のセルに指定することで、複数の行や列のエリアを結合して表す事ができます。
