CSS Grid: keywords de dimensionamento

Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Olá. Hoje eu quero falar sobre algumas CSS Grid keywords especiais que são úteis para definir o dimensionamento (sizing) de grid tracks. A capacidade de usar essas keywords permitirá que você determine precisamente os tamanhos desejados de grid track. Então, vamos lá.

Este artigo faz parte da minha série de introdução ao CSS Grid. Se você quiser conferir meus posts anteriores, aqui você pode encontrar o índice completo.

Introduzindo sizing keywords

Quando se trata de CSS Grid, há apenas três keywords que você pode usar para determinar o tamanho de tracks. Essas keywords são auto, min-content e max-content. Todas elas podem ser usadas nas CSS properties grid-template-colums e grid-template-rows.

Min-content e max-content

Se você quiser tornar o tamanho do grid track dependente de seu conteúdo, você deve usar uma das duas keywords: min-content ou max-content. Min-content grid track tentará manter o tamanho mínimo sem overflowing (estourar) seu conteúdo. Max-content grid track, no entanto, assume que o espaço livre para expandir é infinito e assume a width ideal para seu conteúdo.

Deixe-me mostrar alguns exemplos mostrando a diferença entre as keywords mencionadas. Tenha em mente que cada imagem contém dois containers: o container com uma min-content grid column à esquerda e o container com uma max-content grid column à direita.

Como você pode ver aqui, não há diferença nos tamanhos entre as columns min-content e max-content. O motivo é que a imagem tem seu "default fixed size" que não mudará a menos que você diga explicitamente para mudar. O conteúdo de um texto, por outro lado, tem a capacidade de "comprimir" seu tamanho dependendo da situação. Essa compressão é feita usando text wrapping (quebra de texto), ou seja, palavras únicas não quebram. Sabendo disso, vamos substituir a imagem do exemplo acima por algum texto.

Desta vez, as widths das columns são diferentes. A column min-content força seu conteúdo de texto a "wrap" (quebrar) enquanto a column max-content se expande tanto que nenhum text wrapping é necessário. Observe que a column min-content tem a mesma width da palavra mais longa e a column max-content agora é mais larga que o próprio container.

O que acontecerá quando uma column contiver mais de um tipo de conteúdo? Abaixo está um exemplo das columns contendo imagem e texto.

Em ambos os casos, o elemento mais largo determina o tamanho da column. No caso do min-content, esse elemento é a imagem ou a palavra mais longa. No caso da column max-width, essa é uma imagem ou o texto inteiro. Observe como ambos os tipos de conteúdo são separados verticalmente dentro da coluna. Quero discutir esse comportamento em um dos meus artigos futuros.

Keyword Auto

A keyword auto está relacionada à unidade fr que descrevi nos dois artigos anteriores. Ela determina analogamente que a grid track deve "fill" (preencher) todo o espaço disponível em um determinado eixo.

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

No entanto, há duas diferenças principais entre a keyword auto e a unidade fr. Primeiro, a keyword auto não é uma unidade, então você não pode usá-la com um valor numérico (por exemplo, 2auto) como você pode com fr. Segundo, a keyword auto sempre "perde" com a unidade fr, quando ambas são usadas juntas. Veja o exemplo abaixo.

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

Você pode esperar que a column auto "fill" (preencha) uma quantidade igual de espaço para a column fr na dimensão horizontal. No entanto, a presença da column fr faz com que a column auto "shrink" (encolha) seu tamanho para o tamanho do conteúdo presente.

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ć.