우리는 지난 시간에 grid의 기본적인 내용에 대해서 배웠다. 행과 열을 이용해 요소들의 크기를 조정하고 배치할 수 있음을 말이다. 이번 시간에는 grid-template-areas 속성에 대해 배워볼 것이다. 우리는 gird-template-areas를 통해 레이아웃을 만들 수 있다는 것을 배울 수 있다.

#grid를 columns와 row로 크기 설정

일단 4x4요소를 만들어서 색깔들이 있는 요소들을 layout처럼 만들 것이다.
하지만! 하기 전에 우리는 위의 코드가 매우 불편함을 알 수 있다. 만일 행을 100개를 만들고 싶다면 일일히 100개를 치며 허송세월을 보내고 있을 자신을 상상해볼 수 있다.

그럴땐 grid의 아주 cool한 repeat 함수를 이용하여 요소를 반복적으로 만들어 노가다를 면할 수 있다. 그리고 나서 grid-template-areas를 이용하여 layout으로만들어준다.

grid-template-areas를 이렇게 설정해준다. 이렇게 정하고나서 보면 적용이 안된 것을 알 수 있다. 그러면 뭘 바꿔야 하지..? 각 요소에 다시 가서 이름을 설정해줘야한다.

grid-area : header;

라고 이름을 지정해야 grid-template-areas로 설정할 수 있다. 하지만 이건 명심해야한다. grid-area:header; 이 문장에는 따옴표가 없다. “header” (x) 따옴표가 없어야 설정이 된다.

그렇게 하고 나면

요소들이 자유자재로 배치되어 하나의 레이아웃을 간편하게 만들 수 있음을 알 수 있다.

If 가운데에 저렇게 공백을 만들고 싶은거라면 사이에 .을 끼워넣준다. 그러면 된다.