CSS 그리드: 크기 조정 기능

여보세요. 오늘은 CSS Grid 크기 조정 기능에 대해 이야기하고 싶습니다. 그리드 트랙 크기를 정의하는 다른 방법입니다. 길이, fr 단위 및 크기 조정 키워드와 함께 크기 조정 기능은 가장 어려운 레이아웃을 만드는 데 전념하는 포괄적인 도구 세트를 만듭니다. 다이빙하자.

이 기사는 내 CSS 그리드 소개 시리즈의 일부입니다. 이전 게시물을 확인하려면 전체 목차를 찾을 수 있습니다.

맞춤 콘텐츠 기능.

Fit-content는 길이 또는 백분율 유형의 하나의 인수를 취하고 그리드 트랙의 계산된 크기를 반환하는 함수입니다. 반환된 크기는 최소 콘텐츠, 최대 콘텐츠, 전달된 인수 또는 사용 가능한 공간과 같을 수 있습니다.

이 기사에 포함된 모든 예제에는 다음과 같은 그리드 컨테이너의 CSS 정의가 있음을 명심하십시오.

.container {
    width: 400px;
    height: 400px;
    grid-template-rows: 1fr;
}

fit-content 함수의 인수가 min-content 크기보다 작으면 그리드 트랙의 크기는 min-content와 같습니다.

fit-content(argument) = min-content

when: 

argument < min-content

인수가 max-content 크기보다 크고 max-content 크기가 사용 가능한 공간보다 작은 경우 그리드 트랙의 크기는 max-content와 같습니다.

fit-content(argument) = max-content 

when: 

argument > max-content

and 

max-content < available space 

인수가 사용 가능한 공간보다 작고 max-content보다 작은 경우 그리드 트랙의 크기는 인수와 동일합니다.

fit-content(argument) = argument

when: 

argument < available space

and

max-content > argument 

마지막으로 인수와 최대 콘텐츠가 사용 가능한 공간보다 크면 그리드 트랙의 크기는 사용 가능한 공간과 동일합니다.

fit-content(argument) = available space

when:

argument > available space

and

max-content > available space 

최소 최대 기능.

Minmax는 그리드 트랙 크기를 설명하는 데 사용되는 추가 기능입니다. 이 함수는 레이아웃에 따라 그리드 트랙이 취할 수 있는 크기의 범위를 반환합니다. Minmax 함수는 두 개의 인수를 허용합니다. 그리드 트랙 크기는 첫 번째 인수보다 작거나 두 번째 인수보다 클 수 없습니다.

첫 번째 인수는 길이, 백분율 또는 크기 조정 키워드(min-content, max-content, auto) 유형 중 하나일 수 있습니다. 이 인수는 가능한 모든 레이아웃에서 트랙이 취할 수 있는 최소 크기를 정의합니다. 중요한 것은 트랙의 계산된 크기가 최소 콘텐츠보다 작을 수 있다는 것입니다.

추가 플렉스 유형(fr 단위)을 사용하여 동일한 데이터 유형이 두 번째 인수에 적용됩니다. 이 인수는 트랙이 가능한 모든 레이아웃에서 취할 수 있는 최대 크기를 정의합니다. 이 크기가 사용 가능한 공간보다 작은 경우 트랙 크기는 두 번째 인수의 계산된 크기만큼 커질 수 있습니다. 그렇지 않으면 트랙의 최대 크기는 사용 가능한 공간과 같습니다.



두 번째 인수 크기가 사용 가능한 공간보다 작은 경우 최대 트랙 크기는 인수와 같습니다.



트랙 크기는 첫 번째 인수(50px)에서 설명하는 너비로만 축소될 수 있습니다. 여기서 최소 크기는 여전히 최소 콘텐츠보다 작습니다.


짧은 글 읽어주셔서 감사합니다. 이와 같은 더 많은 콘텐츠를 읽고 싶다면 내 dev.to 또는 계정을 팔로우할 수 있습니다. 또한 어떤 형태로든 피드백을 제공해주세요. 나는 당신의 의견을 읽고 싶습니다. 다음 기사에서 곧 만나요!


추신. 제 작업을 지원하고 싶다면 커피 한 잔에 감사하겠습니다. 고맙습니다. ❤️