「display:grid;」を使ってグリッドレイアウト
この記事の目次
display:grid;
要素をタイル状に並べることができるようになるプロパティと値の組み合わせ
タイル状に並べたい要素の親要素に対して指定する
このプロパティが指定された要素はグリッドコンテナーになり、
グリッドコンテナーの子要素はグリッドアイテムになる
※ ただこれを指定しただけでは何も変わらない
IEの対応状況
ベンダープレフィックス付きで使える
display:grid;であれば値を「-ms-grid」に変えるだけで使える
書き順は普通のを書いた後にベンダープレフィックスを書く
|
1 2 3 4 |
.container{ display:grid;/*通常のブラウザ*/ display:-ms-grid;/*IE用の指定*/ } |
grid-template-columns
子要素（グリッドアイテム）の横のサイズと何列配置するかを指定するプロパティ
グリッドコンテナーに対して設定する
値には幅を指定する 指定の際にはwidthやheightと同じような単位が使える
更に特別な単位として「fr（比率）」での指定も可能になっている
横に並べたい数だけ半角スペース区切りで指定していく
fr (fraction)
frはfractionの略で親要素から見た子要素の大きさを割合で表現する単位
|
1 2 3 4 |
.container{ display:grid; grid-template-columns:1fr 2fr 3fr; } |
のように指定するとグリッドアイテムは１：２：３の比率で３つの要素が横並びになる
IEの対応状況
「-ms-grid-columns」をベンダープレフィックスを書くことで対応する
値の設定方法は同じ
|
1 2 3 4 5 6 |
.container{ display:grid;/*通常のブラウザ*/ display:-ms-grid;/*IE用の指定*/ grid-template-columns:1fr 2fr 3fr;/*通常のブラウザ*/ -ms-grid-columns:1fr 2fr 3fr;/*IE用の指定*/ } |
grid-template-rows
子要素（グリッドアイテム）の縦のサイズと何行アイテムを配置するかを指定するプロパティ
グリッドコンテナーに対して設定する
使い方や、使える単位はgrid-template-columnsと同じ
IEの対応状況
「-ms-grid-rows」を
ベンダープレフィックスを書くことで対応する
値の設定方法は同じ
|
1 2 3 4 5 6 7 8 |
.container{ display:grid;/*通常のブラウザ*/ display:-ms-grid;/*IE用の指定*/ grid-template-columns:1fr 2fr 3fr;/*通常のブラウザ*/ -ms-grid-columns:1fr 2fr 3fr;/*IE用の指定*/ grid-template-rows:100px 100px 100px;/*通常のブラウザ*/ -ms-grid-rows:100px 100px 100px;/*IE用の指定*/ } |
grid-area
上の二つをまとめたようなプロパティ
こっちのほうが使いやすいが、ブラウザの対応状況があまりよくないので使わないほうが無難
存在だけ覚えておくだけでOK
grid-gap
グリッドコンテナーに指定するプロパティで、グリッドアイテム同士の隙間を設定するプロパティ
paddingやmarginと同じ単位が使える
値が一つだと行と列の隙間を纏めて指定
値二つだと行の隙間 列の隙間の順に指定することができる
|
1 2 3 4 |
.container{ display:grid; grid-area:10px;/*10px隙間をあける*/ } |
IEは未対応
なので隙間を作るときは-ms-grid-columnsと-ms-grid-rowsを使って隙間用の行や列を作って対応する
|
1 2 3 4 5 6 7 8 9 |
.container{ display:grid;/*通常のブラウザ*/ display:-ms-grid;/*IE用の指定*/ grid-area:10px;/*10px隙間をあける*/ grid-template-columns:1fr 2fr 3fr;/*通常のブラウザ*/ -ms-grid-columns:1fr 10px 2fr 10px 3fr;/*IE用の指定 隙間にあたる部分に隙間にする分の領域を作る*/ grid-template-rows:100px 100px 100px;/*通常のブラウザ*/ -ms-grid-rows:100px 10px 100px 10px 100px;/*IE用の指定 隙間にあたる部分に隙間にする分の領域を作る*/ } |
grid-column
グリッドアイテムの横方向の範囲を個別に指定するときに使うプロパティ
グリッドアイテムに対して指定する
※ tableのcolspanに近い
値はグリッドラインをベースに横方向に「始まりのライン/終わりのライン」のようにスラッシュ区切りで指定する
例えば上の図のグリッドの中の「G」のグリッドを「H」と合わせた大きさにしたいならば
gの要素に対して「grid-column:3/5;（3番目のラインから5番目のラインまで）」と指定する
|
1 2 3 |
Gの要素{ grid-column:3/5;/*3番目のラインから5番目のラインまで*/ } |
IEの対応方法
IEの場合はグリッドラインの概念がないので設定方法がややこしくなりますが、ベンダープレフィックスで対応できます
どのグリッドから始まるかを番号で指定するための「-ms-grid-column」
何マス分結合するかを始まりを含めて「-ms-grid-column-span」で指定する形で記述します
|
1 2 3 4 5 |
Gの要素{ grid-column:3/5;/*通常のブラウザ 3番目のラインから5番目のラインまで*/ -ms-grid-column:5;/*IE用の指定 5マス目から始まる設定 隙間を1マスとして使っているのでこの値になる*/ -ms-grid-column-span: 3;/*IE用の指定 3マス分の設定 隙間を1マスとして使っているのでこの値になる*/ } |
grid-row
グリッドアイテムの縦方向の範囲を個別に指定するときに使うプロパティ
グリッドアイテムに対して指定する
※ tableのrowspanに近い
値はグリッドラインをベースに縦方向に「始まりのライン/終わりのライン」のようにスラッシュ区切りで指定する
例えば上の図のグリッドの中の「A」のグリッドを「E」と合わせた大きさにしたいならば
Aの要素に対して「grid-row:1/3;（1番目のラインから3番目のラインまで）」と指定する
|
1 2 3 |
Aの要素{ grid-column:1/3;/*1番目のラインから3番目のラインまで*/ } |
IEの対応方法
こちらもベンダープレフィックスで対応できます
どのグリッドから始まるかを番号で指定するための「-ms-grid-row」
何マス分結合するかを始まりを含めて「-ms-grid-row-span」で指定する形で記述します
|
1 2 3 4 5 |
Aの要素{ grid-row:1/3;/*通常のブラウザ 1番目のラインから3番目のラインまで*/ -ms-grid-row: 1;/*IE用の指定 1マス目から始まる設定*/ -ms-grid-row-span: 3;/*IE用の指定 3マス分の設定 隙間を1マスとして使っているのでこの値になる*/ } |
