[css] gird-area not working

grid-template-areas를 사용하며 하는 단순하지만 발견하기 어려운 실수가 있습니다. grid-template-areas를 사용하다가 갑자기 안되면 한 번 확인해보세요.

1. 따옴표(" , ')를 확인하세요 

grid-template-areas로 영역을 이름으로 지정할 때는 따옴표(Quotation marks)를 사용해 구분합니다.

그리고 각 영역의 이름은 grid-area로 지정해주는데 grid-area는 따옴표가 필요없습니다.

 

grid-area를 사용할 때는 따옴표(", ')를 쓰지 않습니다.

 

grid-template-areas:
"header header"
"side main"
"footer footer";

.header {
    grid-area: header;
}

.side {
	grid-area: side;
}

...