우리는 grid-template을 이용하기 위해 위대한 단위를 한 가지 더 알아야 한다. 그것은 바로 fr이다. fr은 최대한 가능한 차지할 수 있는 공간을 다 차지하려고 한다.

그래서 화면 크기를 바꾸어도 그에 맞게 요소의 크기가 변화한다. 반응형 웹사이트를 만들기에도 아주 딱이군. 하지만 이런 fr에도 유의해야할 주의점이 있다.

fr은 width는 크기가 정해져있는데 height는 높이가 정해져 있지 않기때문에 높이가 0이다. 그래서 grid-template-rows에 크기를 정하지 않고 1fr를 지정하게 되면 높이가 0이라서 grid가 사라지고 만다.

우리는 fr를 배웠으니 이제 grid-template을 쓸 수 있다. grid-template를 쓰기 위해선 grid-area를 통해 이름을 정해서 요소를 배열해준다.

각각 width는 header 4개로 차지해주고 1fr를 통해 높이를 설정해준다. 이렇게 설정하면 두번째 줄이 2줄을 차지한다는 소리가 된다.

세부적으로 /를 설정해주면 각기 요소들이 가로를 얼마만큼 차지하는지도 정할 수 있다.

그리고 grid-template에서 repeat는 적용되지 않음을 유의해야한다.