grid-template プロパティ

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

.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
• grid-template-areas

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