CSS #16 -grid3-

1. grid items 함수 -repeat, minmax, fit-content-

그리드에서 사용하는 주요한 함수들이다.

1.repeat

repeat()함수는 행/열의 크기 정의를 반복한다.
'반복되는 횟수'와 '행/열 크기 정의'를 인수로 사용한다.
grid-template-rows, grid-template-columns에서 사용한다.

2. minmax

minmax()함수는 행 열의 '최소/최대 크기'를 정의한다.
첫 번째 인수는 '최솟값'이고 두 번째 인수는 '최댓값'이다.
grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용한다.

일반 요소에서 min-width와 max-width속성을 동시 지정하는 것과 유사하다.

.containter{
grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

3. fit-content

fit-content()함수는 행/열의 크기를 그리드 아이템이 포함하는 내용크기에 맞춘다.
'내용의 최대 크기'를 인수로 사용한다.
minmax(auto, max-content)와 유사하다.(똑같지는 않다.)

.container{
grid-template-columns: fit-content(300px) fit-content(300px);
}

1. 여기서 만약 fit-content가 300px이 아니더라도 콘텐츠의 크기(글자의 너비)에 맞게 설정된다.
2. 만약 글자의 크기가 300px의 너비보다 커지게 된다면 줄바꿈이 된다.

---

2. grid items 단위 -fr, min-content, max-content-

grid units

그리드에서 사용하는 주요 단위들에 대해서 알아보자.

1.fr

fr(fraciton unit)은 사용 가능한 공간에 대한 비율을 의미한다.
다음 예제는 그리드 컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고 남은 공간을 1번째 컬럼에 '1/3', 2번째 컬럼에 '2/3'만큼 사용한다.

.container{
grid-template-columns: 1fr 2fr 100px 25%;
}

즉, 1fr 1fr이라고 하면 1:1을 의미한다.

위의 예제의 의미는 전체 공간에서 100px과 25%를 제외하고 나머지 공간을 1:2로 사용하겠다는 의미가 된다.

2.min-content

그리드 아이템이 포함하는 내용(contents)의 최소 크기를 의미한다.

.container{
grid-template-columns: min-content 1fr; 
}

3.max-content

.container{
grid-template-columns:max-content 1fr;
}

💡알아둬야 할 사항

1. min-contnet의 경우 만약 hllow world라는 말이 들어가 있다면, 여기서 띄어쓰기가 된 부분은 한칸 아래로 줄바꿈되고 최소한의 너비만 가져간다는 것을 알고 있어야 한다.
2. max-content의 경우 hellow world가 줄바꿈이 아닌 콘텐츠의 크기 만큼 너비를 가져간다.
3. 만약 여기서 한국어가 들어가게 되어도 똑같다. 하지만 min-content가 들어가는 순간 한글자마다 줄바꿈이 되어 들어가 있는 것을 볼 수 있는데, 이것을 해결하기 위한 방법은 "word-break:keep-all;"을 입력하게 되면 된다.

---

3. grid items 단위 - auto-fill, auto-fit-

행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로(암시적)조정한다.
repeat()함수와 같이 사용하며, 행/열과 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다.(반응형 그리드)
auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작한다.

.container{
grid-template-columns:repeat(4, minmax(120px, 1fr));
}

1.auto-fill과 auto-fit의 차이점

auto-fill과 auto-fit의 차이점은 그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간이 있을 때 발생한다.

만약 위의 말을 살펴보자면 5개의 박스가 있는 상태에서 auto-fill은 남은 여백이 발생해도 맞는 1:1의 크기 상황에서 나머지를 여백으로 두고, auto-fit은 남는 여백을 늘리더라도 다 채우는 개념이라고 보면 된다.

---