grid-template 이 뭔가 이상할 때

display: grid 및 grid-template-column/rows 를 쓴다는 것은 분명 반응형을 고려했을 것이다.

당연히 px 을 넣지는 않았겠지?

그리고 gap 혹은 grid-gap 속성을 추가했을 것이다

 

% 를 넣었다면 이 % 는 부모의 영역을 기준으로 하기 때문에 %로 하게 되면 gap 영역은 무시된다.

따라서 꼭 fr 을 쓸 수 있도록 하자.

 

참고로 fr 은 그 뭔 영어 용어 기억이 안나는데

1fr 2fr 3fr 뭐 이런식으로 있으면

첫번째 영역에 1 / (1 + 2 + 3)

두번째 영역에 2 / (1 + 2 + 3)

세번째 영역에 3 / (1 + 2 + 3) 

이렇게 분배해주는 fraction 이다 . fr 이친구는 똘똘하게 gap 까지 고려를 해준다 신기하지 ?