CSS 그리드: 차원 키워드

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

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

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

사이즈 키워드 소개

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

최소 콘텐츠 및 최대 콘텐츠

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

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

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

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

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

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

키워드 자동

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

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

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

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

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

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

위 내용은 CSS 그리드: 차원 키워드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!