Gridレイアウトの指定の仕方は二種類、エリア名で指定する方法と、ライン番号で指定する方法がある。 エリア型のほうが分かりやすそうなので、それでやってみた。 前回Gridレイアウトのエリア名による指定の仕方を試したので、今回はライン番号で指定する方法 領域の定義の仕方はエリア名で指定する場合と同じ
#親領域名{
display:grid;
grid-template-rows:高さ 高さ 高さ;
grid-template-columns: 幅 幅 幅;
}領域の間のラインに番号が振られており、アイテムを配置する領域を、その何番と何番の間という形で指定する。 例えば下のような領域があったとして
1
2
3
4
1
2
3
4
A
B
C
D
E
F
G
H
I
縦の１と２の間、横の１と２の間がＡという領域になる。 （※上の図もグリッドレイアウトで作成しました。） 指定の仕方は
grid-row: 番号 / 番号; grid-column: 番号 / 番号;
と書く。
.itemA{ grid-row: 1 / 2 ; grid-column: 1 / 2 ; }
.itemB{ grid-row: 1 / 2 ; grid-column: 2 / 3 ; }
.itemB{ grid-row: 1 / 2 ; grid-column: 3 / 4 ; }
・
・
・
領域を跨って指定する場合も番号で指定する。 rowの１と２の間、columnの１と３と指定すれば、ＡとＢに跨る領域になる。
.itemAB{ grid-row: 1 / 2 ; grid-column: 1 / 3 ;}
1
2
3
4
1
2
3
4
AB
C
D
E
F
G
H
I
エリア名指定と同様、Ｌ字型、Ｔ字型、コの字型のような領域は指定できない。 （でもやっぱり、エリア名で指定したほうが楽ですね）
コメント