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

display:grid;

 display:grid; は、子エレメントの並びをレイアウトすることができる display プロパティの値です。マス目上の配置に子エレメントを配置していきます。

 display:grid; によるレイアウト作成方法をグリッドレイアウトなどと呼びます。他にはフレックスレイアウトと呼ばれる display:flex; による方法もあります。

 以下は、display:grid; によって子エレメントを3×2に配置したものです。

display:grid; によるレイアウト
<style>
div#example {
	display: grid;
	grid-template-columns: 150px 150px 150px;
	grid-template-rows: 150px 150px;
}
</style>
<div id="example">
	<div style=""border:1px solid black;background-color:#232946;"></div>
	<div style="border:1px solid black;background-color:#fffffe;"></div>
	<div style="border:1px solid black;background-color:#b8c1ec;"></div>
	<div style="border:1px solid black;background-color:#eebbc3;"></div>
	<div style="border:1px solid black;background-color:#121629;"></div>
	<div style="border:1px solid black;background-color:#000000;"></div>
</div>
表示例

詳しくは Example を参照してください

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

 display プロパティを利用する上では、タグエレメントがブロックエレメントであるか/否か、そして paddingmargin の扱いに違いがあることを知っておいた方がよいでしょう。

display:grid; における並びの基準

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

1234→main axis(主軸)
1
2
3
4
cross axis(交差軸)

display:grid; の作成方法

 display:grid; を宣言すると子エレメントをマス目状に配置するとブラウザは想定します。
 grid-template-columns プロパティと grid-template-rows プロパティによって、マスの幅や高さと共にマス数を設定します。

grid-template-columns と grid-template-rows プロパティ

 grid-template-columns は、マスの幅の長さを、必要な列数分で設定します。列数は、横に並べる数です。値と値は半角スペースで区切ります。
  grid-template-rows は、高さを、必要な行数分で設定します。行数は、縦に並べる数です。

grid-template-columns と grid-template-rows プロパティ
#contena {
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: 300 100 400 300;
}

 上記の例は、列3×行4のマスを指定しています。列は、親エレメントに対して 20%、60%、20%に分割します。行方向には 300px、100px、400px、300px の高さにマスを設定しています。
 何も単位がない場合は「px」として認識されます。

   grid-template-rows のみの指定も可能です。

grid-template-columns
#contena {
  display: grid;
  grid-template-columns: 1fr min(60em, 100%) 1fr;
}

 真ん中のマスは 65 文字分の幅で、その幅より親エレメントが小さい場合は 100% 幅にします。両脇は、余った幅を均等に分けます。
 これは、読みやすく、web ページの幅をいっぱいに利用したフルブリードと呼ばれる表示方法の一部です。詳しくは、「フルブリード」で検索してください。

 単位については、「CSS 長さの単位(CSS Length Units)」を参照してください。

grid-template-areas プロパティ

 grid-template-columns プロパティと grid-template-rows プロパティを使って設定したマス目に、grid-template-areas によってエレメントの配置を指定します。
 grid-template-areas は、想定されるマス目に以下の grid-area で設定したエレメントの名称を指定します。値と値は半角スペースで区切ります。

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

grid-template-areas
#contena {
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: 300 max-height( 400px ) 300;
	grid-template-areas:"header header header" "main main aside" "footer footer footer";
}

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

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

横に分けるレイアウト
<div id="contena">
	<section id="main" style="grid-area: main;">
		...
	</section>
	<section id="aside" style="grid-area: aside;">
		...
	</section>
</div>

#contena {
	display: grid;
	grid-template-columns: 65% 1fr;
	grid-template-areas:"main aside";
}

grid-area プロパティ

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

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

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

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

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

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

とします。

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

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

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


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

grid-row と grid-column プロパティ
header {
   grid-column: auto / span 3;
   ...
}

main {
   grid-row: auto / span 2;
   ...
}

aside {
   ...
}

footer {
   grid-column: auto / span 3;
   ...
}