[ CSS ] fr, Fraction, minmax()

[ fr ]

그리드 트랙 사이즈로 사용되는 단위로 그리드 컨테이너에서 사용 가능한 공간을 비율로 나눠 설정한다.

 

아래 예시를 통해 살펴보자

grid-template-columns:1fr 1fr 2fr 1fr로 설정할 경우로

사용할 수 있는 공간을 1:1:2:1 비율로 공간을 가지게 된다.

 

그렇다면 400px의 사용공간을 가지는 그리드에 grid-template-columns : 40px 1fr 2fr 1fr로 설정하면

어떻게 그리드가 설정될까?

위에서 언급한 것처럼 사용 가능한 공간에 대한 비율이기에

400px공간에서 40px를 뺀 나머지 공간인 360px를 가지고 1:2:1 비율로 공간을 가지게 된다.

 

 

 

---

[ minmax() ]

앞서 이야기 한 것처럼 fr는 가지고 있는 공간 ( 사용 가능한 공간 )을 똑같은 크기로 나누는데

나누는 칼럼의 수가 많아질수록, 화면의 크기를 줄일수록 칼럼 하나가 가지는 공간이 줄어들고

나누는 칼럼의 수가 적어질 수록, 화면의 크기를 늘릴수록 칼럼 하나가 가지는 공간이 늘어난다.

 

경우에 따라서 우리는 칼럼이 가지는 최소 혹은 최대 공간 크기를 지정하길 원할텐데

이는 minmax(min,max)를 사용하면 가능하다.

 

gird-template-columns:repeat(10,minmax(100px,1fr))

-> 하나의 칼럼의 크기가 최소 100px, 최대 1fr을 넘지 않는 칼럼을 10개 생성한다.

-> 만약 크기가 화면을 넘어가는 경우엔 스크롤을 해서 볼 수 있다.

 

min-width : 문자열의 경우 가장 긴 단어의 길이만큼 공간을 갖는다.

max-width : 문자열의 경우 문자열의 길이만큼 공간을 갖는다.