Weblasts

「display:grid;」を使ってグリッドレイアウト

display:grid;

要素をタイル状に並べることができるようになるプロパティと値の組み合わせ
タイル状に並べたい要素の親要素に対して指定する
このプロパティが指定された要素はグリッドコンテナーになり、
グリッドコンテナーの子要素はグリッドアイテムになる
※ ただこれを指定しただけでは何も変わらない

IEの対応状況

ベンダープレフィックス付きで使える
display:grid;であれば値を「-ms-grid」に変えるだけで使える
書き順は普通のを書いた後にベンダープレフィックスを書く

grid-template-columns

子要素(グリッドアイテム)の横のサイズと何列配置するかを指定するプロパティ
グリッドコンテナーに対して設定する
値には幅を指定する 指定の際にはwidthやheightと同じような単位が使える
更に特別な単位として「fr(比率)」での指定も可能になっている
横に並べたい数だけ半角スペース区切りで指定していく

fr (fraction)

frはfractionの略で親要素から見た子要素の大きさを割合で表現する単位

のように指定するとグリッドアイテムは1:2:3の比率で3つの要素が横並びになる

IEの対応状況

「-ms-grid-columns」をベンダープレフィックスを書くことで対応する
値の設定方法は同じ

grid-template-rows

子要素(グリッドアイテム)の縦のサイズと何行アイテムを配置するかを指定するプロパティ
グリッドコンテナーに対して設定する
使い方や、使える単位はgrid-template-columnsと同じ

IEの対応状況

「-ms-grid-rows」を
ベンダープレフィックスを書くことで対応する
値の設定方法は同じ

grid-area

上の二つをまとめたようなプロパティ
こっちのほうが使いやすいが、ブラウザの対応状況があまりよくないので使わないほうが無難
存在だけ覚えておくだけでOK

grid-gap

グリッドコンテナーに指定するプロパティで、グリッドアイテム同士の隙間を設定するプロパティ
paddingやmarginと同じ単位が使える
値が一つだと行と列の隙間を纏めて指定
値二つだと行の隙間 列の隙間の順に指定することができる

IEは未対応

なので隙間を作るときは-ms-grid-columnsと-ms-grid-rowsを使って隙間用の行や列を作って対応する

grid-column

グリッドアイテムの横方向の範囲を個別に指定するときに使うプロパティ
グリッドアイテムに対して指定する
※ tableのcolspanに近い
値はグリッドラインをベースに横方向に「始まりのライン/終わりのライン」のようにスラッシュ区切りで指定する

例えば上の図のグリッドの中の「G」のグリッドを「H」と合わせた大きさにしたいならば
gの要素に対して「grid-column:3/5;(3番目のラインから5番目のラインまで)」と指定する

IEの対応方法

IEの場合はグリッドラインの概念がないので設定方法がややこしくなりますが、ベンダープレフィックスで対応できます
どのグリッドから始まるかを番号で指定するための「-ms-grid-column」
何マス分結合するかを始まりを含めて「-ms-grid-column-span」で指定する形で記述します

grid-row

グリッドアイテムの縦方向の範囲を個別に指定するときに使うプロパティ
グリッドアイテムに対して指定する
※ tableのrowspanに近い
値はグリッドラインをベースに縦方向に「始まりのライン/終わりのライン」のようにスラッシュ区切りで指定する

例えば上の図のグリッドの中の「A」のグリッドを「E」と合わせた大きさにしたいならば
Aの要素に対して「grid-row:1/3;(1番目のラインから3番目のラインまで)」と指定する

IEの対応方法

こちらもベンダープレフィックスで対応できます
どのグリッドから始まるかを番号で指定するための「-ms-grid-row」
何マス分結合するかを始まりを含めて「-ms-grid-row-span」で指定する形で記述します