CSS/glid-layout

display: grid;
display: inline-grid;
全体を囲む要素に指定

grid-template-columsns: 100px 50% max-content 1fr auto minmax(100px, 500px);
列のトラックの幅を半角スペースで区切って指定
//長さ
px, %, em, vh, vw ,mm, cm, in, pt, pc, ch, rem, vmin, vmax ,calc()等
//max-content, min-content
そのトラック内のすべてのアイテムの max-content あるいは min-content の値を算出
//auto
そのトラックのアイテムの内容や、他のトラックとの兼ね合いで、適切な大きさになります。
//fit-content(長さ)
autoに近いですが、"長さ"の指定が若干作用します。
//minmax(min, max)
トラックの最小幅および最大幅を指定できます。min および max には上に挙げてきた値を入れることが出来ます。
//fr
すべてのトラックの大きさが決定してもまだなおコンテナに余裕がある場合に、frを指定しているトラックがその比率で残りのスペースを占有

grid-template-rows: １つ目 2つめ 3つめ ...;
 行のトラックの高さを半角スペースで区切って指定
 
grid-row: 1/3;
アイテムが占める行のラインの番号をスラッシュ区切りで指定

grid-column: 1/4;
アイテムが占める列のラインの番号をスラッシュ区切りで指定

grid-template-areas: 
	"areaA areaB areaC"
	"areaA areaD areaD";
エリアを作ってそれぞれに名前を付ける(コンテナ)

grid-area: 各アイテム が占めるエリアの名前を指定(各アイテム)

#container {
	width: 100%;
	height: 500px;
	display: grid;
	grid-template-columns: 10% 70% 20%;
	grid-template-rows: 20% 50% 30%;
}
	

#container02 {
	width: 100%;
	height: 500px;
	display: grid;
	grid-template-columns: 50% 25% 25%;
	grid-template-rows: 20% 30% 30% 20%;
}
	

#container03 {
	width: 100%;
	height: 700px;
	display: grid;
	grid-template-columns: 33% 34% 33%;
	grid-template-rows: 20% 20% 20% 20% 20%;
	margin: 50px 0;
}