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

grid-template プロパティ

 grid-template プロパティは、display:grid;によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の並び数やサイズを指定するプロパティです。

グリッドアイテムを縦方向に3つ、高さを20%、60%、20%とし幅を自動で指定(Exampleを参照
.grid_container{
  display: grid;
  grid-template: 20% 60% 20% / auto;
}

 上記の display: grid; が機能するには、想定される領域分のエレメントを HTML で作成しておき、grid-template で連結方法を指定する必要があります。詳しくはExampleを参照してください。

 以下の例はアイテムごとに名称を設定して grid-template プロパティでそのアイテムの連結方法を設定しています。

 グリッドアイテムになるエレメントに grid-area プロパティでその名称を設定おきます。そして、grid-template プロパティでその名称を利用して連結方法を指定します。

例:名称で連結
.grid_container{
  display: grid;
  grid-template:
		"a b b" 50px
		"a b b" 100px
		"c c c" 50px / 100px 200px 1fr;
}

.area_a {
	grid-area: a;
}

.area_b {
	grid-area: b;
}

.area_c {
	grid-area: c;
}

 grid-template プロパティは、以下のプロパティを一括で指定することができます。

 並び数は、grid-template-rowsに各行ごとの高さを指定、grid-template-columnsに各列ごとの幅を指定することで設定します。

構文(Syntax)

CSS

grid-template: none | [ grid-template-rows / grid-template-columns ] | grid-template-areas | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.gridTemplate;
値の設定
object.style.gridTemplate=" none | [ grid-template-rows / grid-template-columns ] | grid-template-areas | initial | inherit ";

値(Values)

Value摘要
none初期値(default値)
grid-template-rows行(横並び)単位の並び数やグリッドアイテムの高さを指定
grid-template-columns列(縦並び)単位の並び数やグリッドアイテムの幅を指定
grid-template-areas領域名を並べることで連結
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none none none
継承(Inherited)No
CSS AnimationYes

Example

グリッドアイテムの並びと大きさを指定

 grid-templateの例です。 grid-template-rowsgrid-template-columnsにそれぞれ高さと幅を指定することで並べ方を設定しています。

 最下端部分の3つのアイテムグリッドのHTMLテキストを作成していないために表示されません。

名称で連結

 名称で連結する例です。3つに分割しています。
領域は四角い形になるように指定する必要があります。設定した名称はグリッドアイテムにgrid-areaプロパティで指定します。