display:grid;

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;
}

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

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

#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 で設定したエレメントの名称を指定します。値と値は半角スペースで区切ります。

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

#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”となる各子エレメントにおいては、

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

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

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

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

とします。