fr

(사용 가능한) 공간 너비 비율

ex)
100px 100px 1fr 2fr일때 너비가 1000px이면 100 100을 뺀 800을 1:2로 나눠갖는다

함수들

1. repeat
2. minmax
3. fit-content
4. min-content
5. max-content
6. word-break
7. auto-fill
8. auto-fit

2. minmax

minmax(A,B) : 최대는 B까지 만들어지고 최소너비는 A 범위까지 지정

ex) grid-template-columns : minmax(100px,1fr) minmax(200px,1fr)
둘다 1:1이나 계속줄어들면 오른쪽은 200px이하로 더는 안줄고 오른쪽만 100px이 되기전까지 줄어든다.

3. fit-content

fit-content(A) : content너비에 딱 맞추되 Apx만큼만 만들어진다.
content 너비가 Apx보다 크면 그 아래로 이어진다. (그이상을 넘을 수 없다)

4. min-content

띄어쓰기 한 부분을 기준으로 컨텐츠를 유지하는 가장 최소의 공간
(컨텐츠가 가지는 최소 너비)

5. max-content

최대의 공간은 모든 텍스트가 한줄로 표현되는 공간
(컨텐츠의 최대너비를 사용)

예제

grid-template-columns: 1fr minmax(max-content, 1fr) 1fr;

두번째 부분이 아무리 줄어들어도 한줄로 최대 content는 유지시킨다
max-content부분이 min-content가 되면 줄였을때 한줄에서 여러줄로 바뀐다

6. word-break : keep-all

기존에는 한글은 글자마다로 단어 단위를 적용하였다면 이것을 이용해
한글은 글자마다가 아닌 띄어쓰기 단어 단위로 적용한다.
min-content와 같이사용

7. auto-fill

최소너비 우선적용 (repeat와 함께사용)

8. auto-fit

최대너비 우선적용 (repeat와 함께사용)

• auto-fill과 auto-fit은 1개의 행/열을 통해 빈 공간이 존재할때 차이가 난다