備忘録的プログラミングリファレンス

display:grid;

 display:grid;は子エレメントの並びを設定することができるdisplayプロパティの値です。

 displayプロパティはタグエレメントの並びも設定できるプロパティです。表示位置を指定するgrid値。 ある程度のブラウザ任せにするflex値があります。

 displayプロパティを利用する上で、タグエレメントによってはデフォルト設定で、改行が入るか入らないか、paddingやmarginの扱いに違いがあることを知っておいた方がよいでしょう。

関連プロパティについて

 display: grid;では表示基準が設けられています。この表示基準に基づいて関連プロパティを設定することができます。

   1       2       3       4   →main axis(主軸)
1 ┏━━━┳━━━┳━━━┳
  ┃      ┃      ┃      ┃
2 ┣━━━╋━━━╋━━━╋
  ┃      ┃      ┃      ┃
3 ┣━━━╋━━━╋━━━╋
  ┃      ┃      ┃      ┃
4 ┣━━━╋━━━╋━━━╋

↓
cross axis
(交差軸)

関連プロパティ

 以下の関連プロパティによって並びの設定を作ります。

関連プロパティ値(value)説明
grid-template-columns 横方向のマス目を設定します。幅の長さ(単位はpx)を、必要なマス目分で設定します。
grid-template-rows 縦方向のマス目を設定します。高さ(単位はpx)を、必要なマス目分で設定します。
grid-template-areas grid-template-columns、grid_template_areasで設定したマス目に名称を設定します。この名称を子エレメントで使用します。

動作の確認

display:grid;の設定方法

display:grid;宣言、grid-template-columnsプロパティ、grid-template-rowsプロパティ

 display:grid;を宣言すると子エレメントをマス目状に配置するとブラウザは想定します。

 display:grid;を宣言する親エレメントで、grid-template-columnsプロパティとgrid-template-rowsプロパティによって、マスの幅や高さと共にマス数を設定します。
 grid-template-columnsは、マスの幅の長さ(単位はpx)を、必要なマス目分で設定します。
 grid-template-rowsは、高さ(単位はpx)を、必要なマス目分で設定します。

grid-template-areasプロパティ

 grid-template-columnsプロパティとgrid-template-rowsプロパティを使って設定したマス目に、grid-template-areasによってレイアウトします。
grid-template-areasは、想定されるマス目に任意の名称を設定することでレイアウトを設定します。値と値は半角スペースで区切ります。

 例えば、3×3のマス目において、最上段の3マスをすべて”header”、2段目の2マスを"main"、1マスを”aside”、最下段の3マスを”footer”としたときには以下のように設定します。

grid-template-areas:"header header header" "main main aside" "footer footer footer";

 子エレメントにgrid-rowとgrid-columnプロパティを設定することでもレイアウトを設定できます。

 実際には、デフォルトで上下にエレメントが並ぶので、”main”と”aside”の配置でdisplay:grid;を使うことになると思います。

grid-areaプロパティ

 最後に、上記のgrid-template-areasプロパティで設定した名称を、各子エレメントにgrid-areaプロパティで設定します。

 例えば、上記の例で”header”、"main"、”aside”、”footer”となる各子エレメントにおいては、

header {
   grid-area: header;
   ...
}

main {
   grid-area: main;
   ...
}

aside {
   grid-area: aside;
   ...
}

footer {
   grid-area: footer;
   ...
}

とします。

grid-rowとgrid-columnプロパティ

 grid-template-areas以外でもレイアウトを設定する方法があります。子要素にgrid-rowとgrid-columnプロパティを宣言することでもレイアウトを設定できます。

 grid-rowとgrid-columnプロパティは横方向、縦方向の番号を「始点/終点」で設定します。


 grid-columnは、子エレメントが占有する範囲の横方向の始点と終点を番号(横始点/横終点)で設定します。
 grid-rowは、子エレメントが占有する範囲の縦方向の始点と終点を番号(縦始点/縦終点)で設定します。