intro
CSS 그리드는 웹 페이지의 레이아웃을 구성하는 데 사용되는 강력한 CSS 레이아웃 시스템입니다. 그리드는 행과 열의 구조로 요소를 배치하고 정렬하는 방법을 제공하며, 복잡한 레이아웃을 간단하게 만들 수 있습니다.
CSS 그리드에서는 영역의 범위를 나눌때 주로 fr이라는 단위를 사용하는데요.
fr이란?
display: grid에서 자주 쓰이는 단위인 fr은 영어로 Fractional Unit 즉, "분수 단위"를 뜻하며 그리드 컨테이너 내에서 사용 가능한 공간을 분수로 분배하는 데 사용됩니다.
grid-template-columns: repeat(2, 1fr);영역안에서 정확하게 같은 너비(width)를 같게 됨, 즉 각자
width: 50%의 영역을 가진다.
grid-template-columns: 2fr 1fr;총
3fr에서 각각2fr,1fr의 값을 나눠 가지게 됨, 즉2fr = width: 66.66%,1fr = width: 33.33%
auto?
반면 fr대신 사용할수 있는 단위인 auto도 fr와 같이 영역안의 범위를 똑같이 나눠가질수 있습니다.
grid-template-columns: repeat(2, auto);각각
width: 50%의 영역을 가진다.
grid-template-columns: auto auto auto;각각 width:
33.33%의 영역을 가진다.
여기까지 fr과 auto를 비교해 보았을때는 서로 다른점이 보이지 않습니다.
fr과 auto의 차이점
하지만 만약에 grid-template-columns: 1fr auto 1fr; 같이 fr과 auto를 섞어서 사용한다면 어떻게 될까요?
grid-template-columns: 1fr auto 1fr;여기서
auto는width가 가질수 있는 최소 값 즉 0의 크기를 가지게 되고 나머지 영역들이1fr씩 나눠지게 된다.
이와 같이 fr과 auto를 같이 사용하면 auto가 우선순위에서 밀려 제 기능을 할수 없는 점을 알수 있습니다.
마무리하며..
CSS 그리드에서 auto를 영역을 나누는 용도로 사용할 때에는 주변에 fr이 있는지 먼저 확인하고 사용하는 것이 중요하며 fr과는 달리 영역 내에서의 서로 다른 비율(1fr, 2fr, 3fr등)을 가지게 할수 없다는 점을 알고 그리드를 활용한다면 더 좋을 것 같습니다 :)
