참고: 방금 아래 텍스트를 번역하여 여기에 게시했습니다. 참고 자료는 이 글의 끝에 있습니다.

안녕하세요. 오늘 저는 그리드 트랙의 크기를 정의하는 데 유용한 몇 가지 특별한 CSS 그리드 키워드에 대해 이야기하고 싶습니다. 이러한 키워드를 사용하는 기능을 사용하면 원하는 그리드 트랙 크기를 정확하게 결정할 수 있습니다. 그럼 가자.

이 글은 CSS Grid 시리즈 소개의 일부입니다. 이전 게시물을 확인하고 싶다면 여기에서 전체 목차를 확인하실 수 있습니다.

사이즈 키워드 소개

CSS 그리드의 경우 트랙 크기를 결정하는 데 사용할 수 있는 키워드는 세 가지뿐입니다. 이러한 키워드는 auto, min-content 및 max-content입니다. 이들 모두는 CSS 속성인 Grid-template-colums 및 Grid-template-rows에서 사용할 수 있습니다.

최소 콘텐츠 및 최대 콘텐츠

그리드 트랙의 크기를 콘텐츠에 따라 결정하려면 min-content 또는 max-content라는 두 가지 키워드 중 하나를 사용해야 합니다. 최소 콘텐츠 그리드 트랙은 콘텐츠가 넘치지 않고 최소 크기를 유지하려고 시도합니다. 최대 콘텐츠 그리드 트랙은 확장할 수 있는 여유 공간이 무한하다고 가정하고 콘텐츠에 이상적인 너비를 가정합니다.

언급된 키워드 간의 차이점을 보여주는 몇 가지 예를 보여드리겠습니다. 각 이미지에는 두 개의 컨테이너가 포함되어 있습니다. 왼쪽에 최소 콘텐츠 그리드 열이 있는 컨테이너와 오른쪽에 최대 콘텐츠 그리드 열이 있는 컨테이너

여기에서 볼 수 있듯이 min-content 열과 max-content 열의 크기에는 차이가 없습니다. 그 이유는 이미지에 명시적으로 변경하라고 지시하지 않는 한 변경되지 않는 "기본 고정 크기"가 있기 때문입니다. 반면에 텍스트 내용은 상황에 따라 크기를 "압축"할 수 있습니다. 이 압축은 텍스트 줄 바꿈(텍스트 줄 바꿈)을 사용하여 수행됩니다. 즉, 단일 단어는 줄 바꿈되지 않습니다. 이를 알고 위 예의 이미지를 일부 텍스트로 바꾸겠습니다.

이번에는 열 너비가 다릅니다. min-content 열은 텍스트 내용을 "줄바꿈"하도록 강제하는 반면, max-content 열은 텍스트 줄 바꿈이 필요하지 않을 정도로 확장됩니다. min-content 열은 가장 긴 단어와 너비가 같고 max-content 열은 이제 컨테이너 자체보다 넓습니다.

열에 콘텐츠 유형이 두 개 이상 포함되면 어떻게 되나요? 다음은 이미지와 텍스트가 포함된 열의 예입니다.

두 경우 모두 가장 넓은 요소가 열의 크기를 결정합니다. min-content의 경우 이 요소는 이미지이거나 가장 긴 단어입니다. 최대 너비 열의 경우 이미지 또는 전체 텍스트입니다. 두 콘텐츠 유형이 열 내에서 어떻게 수직으로 분리되는지 확인하세요. 나는 향후 기사 중 하나에서 이 동작에 대해 논의하고 싶습니다.

키워드 자동

키워드 auto는 이전 두 기사에서 설명한 fr 단위와 관련이 있습니다. 마찬가지로 그리드 트랙이 주어진 축에서 사용 가능한 모든 공간을 "채워야" 한다고 결정합니다.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

그러나 auto 키워드와 fr 단위 사이에는 두 가지 주요 차이점이 있습니다. 첫째, 키워드 auto는 단위가 아니므로 fr처럼 숫자 값(예: 2auto)과 함께 사용할 수 없습니다. 둘째, 둘 다 함께 사용되는 경우 키워드 auto는 항상 fr 단위와 함께 "패배합니다". 아래 예를 참조하세요.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

자동 열이 가로 차원의 fr 열과 동일한 공간을 "채울" 것으로 예상할 수 있습니다. 그러나 fr 열이 있으면 열의 크기가 현재 내용의 크기에 맞게 자동으로 "축소"됩니다.

텍스트 콘텐츠의 경우 자동 그리드 트랙은 최소 콘텐츠/최대 콘텐츠 그리드 트랙과 다르게 작동합니다. auto가 fr과 혼합되면 auto-track은 자동 추적이 사용 가능한 모든 공간을 "채우지" 않는 한 텍스트 내용을 강제로 "줄바꿈"하지 않습니다.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

짧은 글을 읽어주셔서 감사합니다. 이와 같은 더 많은 콘텐츠를 읽으려면 내 dev.to 또는 트위터 계정을 팔로우하세요. 또한 어떤 종류의 피드백이라도 자유롭게 보내주세요. 나는 당신의 의견을 읽고 싶습니다. 다음 기사에서 곧 뵙겠습니다!

추신. 제 일을 응원해 주신다면 커피 한 잔이라도 주시면 감사하겠습니다. 감사해요. ❤️

원천

Mateusz Kirmuć가 작성한 기사.