grid-template-areas

영역 이름으로 그리드 정의

각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법

.container {
	display: grid;
	grid-template-columns: repeat(4, 200px);
	grid-template-rows: 100px repeat(2, 200px) 100px;
	grid-template-areas:
		"header header header header"
		"content content content nav"
		". . . ."
		"footer footer footer footer";
}

빈칸은 마침표(.) 나 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 됨!

⭐️ 중요 ⭐️

>> 해당 아이템 요소에 grid-area 속성으로 이름을 지정해주기!

.header {
	grid-area: header;
}
.content {
	grid-area: content;
}
.nav {
	grid-area: nav;
}
.footer {
	grid-area: footer;
}