Layout de grade CSS Como usar minmax ()

o Módulo de Layout de Grade CSS leva o design responsivo ao próximo nível, introduzindo um novo tipo de flexibilidade isso nunca foi visto antes. Agora, não podemos apenas definir grades customizadas incrivelmente rápido apenas com CSS puro, mas o CSS Grid também tem muitas gemas escondidas que nos permitem ajustar ainda mais a grade e obter layouts complicados.

o mínimo máximo() função é um desses recursos menos conhecidos. Torna possível definir o tamanho de uma trilha de grade no mínimo até o alcance máximo para que a grade possa se adaptar à viewport de cada usuário da melhor maneira possível.

Sintaxe

A sintaxe do mínimo máximo() função é relativamente simples, é preciso dois argumentos: um valor mínimo e um valor máximo:

 minmax (min, max) 

o min valor tem que ser menor que o máximo, de outra forma máximo é ignorado pelo navegador.

Nós podemos usar o mínimo máximo() funcionar como o valor do grid-template-columns ou grid-template-rows propriedade (ou ambos). Em nosso exemplo, usaremos o primeiro, pois é um caso de uso muito mais frequente.

 .container display: grid; grid-template-columns: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100 px 100 px 100 px; intervalo de grade: 10px;  

Na demonstração Codepen abaixo, você pode encontrar o Código HTML e CSS vamos usar ao longo do artigo.

Podemos usar diferentes tipos de valores dentro de mínimo máximo() função, tudo depende do tipo de grade personalizada que queremos criar.

Valores de comprimento estático

Existem duas maneiras básicas como podemos usar o mínimo máximo() função com valores de comprimento estático.

Em primeiro lugar, podemos usar mínimo máximo() apenas para uma coluna de grade e defina a largura das outras colunas como valores estáticos simples (pixels aqui).

 colunas de modelo de grade: minmax (100px, 200px) 200px 200px; 

Na demonstração do gif abaixo, você pode ver que esse layout é não responsivo, no entanto, a primeira coluna tem alguma flexibilidade. A segunda e a terceira colunas mantêm a largura fixa (200px) enquanto a primeira coluna varia de 100px a 200px, baseado no espaço disponível.

Em segundo lugar, podemos definir a largura de mais de uma coluna de grade usando mínimo máximo(). Os valores mínimo e máximo são ambos estáticos, portanto, por padrão, a grade é não responsivo. No entanto, as próprias colunas são flexível, mas apenas entre 100 px e 200 px. Eles crescer e encolher simultaneamente à medida que mudamos o tamanho da viewport.

 colunas de molde de grelha: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Note que também podemos use o repetir() função junto com mínimo máximo(). Então, o trecho de código anterior também pode ser escrito assim:

 colunas de modelo de grade: repetição (3, minmax (100px, 200px)); 

Valores dinâmicos de comprimento

Além dos valores estáticos, o mínimo máximo() função também aceita unidades de porcentagem e a nova fração (fr) unit como argumentos. Ao usá-los, podemos obter grades personalizadas que são responsivo e mudar suas dimensões de acordo com o espaço disponível.

O código abaixo resulta em uma grade na qual a largura da primeira coluna varia entre 50% e 80% enquanto o segundo e o terceiro dividir uniformemente o espaço restante.

 grelha-molde-colunas: minmax (50%, 80%) 1fr 1fr; 

Quando usamos valores dinâmicos com o mínimo máximo() função, é crucial para configurar um regra que faz sentido. Deixe-me mostrar um exemplo onde o grade desmorona:

 grelha-modelo-colunas: minmax (1fr, 2fr) 1fr 1fr; 

Esta regra não faz sentido, pois o navegador é incapaz de decidir qual valor atribuir ao mínimo máximo() função. O valor mínimo levaria a um 1fr 1fr 1fr largura da coluna, enquanto o máximo para 2fr 1fr 1fr. Mas, ambos são possíveis, mesmo em uma tela muito pequena. Há nada que o navegador possa relacionar.

Aqui está o resultado:

Combine valores estáticos e dinâmicos

Também é possível combinar valores estáticos e dinâmicos. Por exemplo, na demo Codepen acima, eu usei o minmax (100px, 200px) 1fr 1fr; regra que resulta em uma grade onde a primeira coluna varia entre 100 px e 200 px e o espaço restante é uniformemente compartilhado entre os outros dois.

 grid-template-columns: minmax (100px, 200px) 1fr 1fr; 

É interessante observar que à medida que a viewport cresce, a primeira coluna cresce de 100px para 200px. Os outros dois, governados pela unidade fr, começam a crescer somente após o primeiro ter atingido sua largura máxima. Isso é lógico, pois o objetivo da unidade de fração é dividir o espaço disponível (restante).

o min-content, conteúdo máximo, e auto palavras-chave

Há um terceiro tipo de valor podemos atribuir ao mínimo máximo() função. o min-content, conteúdo máximo, e auto Palavras-chave relacionam as dimensões de uma trilha de grade conteúdo que contém.

conteúdo máximo

o conteúdo máximo palavra chave direciona o navegador para o qual a coluna da grade precisa ser tão largo quanto o elemento mais largo que contém.

Na demonstração abaixo, coloquei um Imagem de 400px de largura dentro da primeira trilha de grade e usou a seguinte regra de CSS (você pode encontrar uma demonstração Codepen com o código modificado completo no final do artigo):

 .container grid-template-columns: conteúdo máximo 1fr 1fr; / ** * O mesmo com a notação minmax (): * grid-template-columns: minmax (conteúdo max, conteúdo máximo) 1fr 1fr; * / 

Eu não usei mínimo máximo() notação ainda, mas no comentário de código acima você pode ver como o mesmo código seria com ele (embora seja supérfluo aqui).

Como você pode ver, a primeira coluna da grade é tão larga quanto seu elemento mais largo (aqui a imagem). Desta forma, os usuários podem sempre ver a imagem em tamanho grande. No entanto, sob um determinado tamanho de viewport, esse layout é não responsivo.

min-content

o min-content palavra chave direciona o navegador que a coluna da grade precisa ser tão ampla quanto a elemento mais estreito que contém, de modo que não leva a um estouro.

Vamos ver como será a demonstração anterior com a imagem se mudarmos o valor da primeira coluna para min-content:

 .container grid-template-columns: min-conteúdo 1fr 1fr; / ** * O mesmo com a notação minmax (): * grid-template-columns: minmax (conteúdo min, conteúdo min) 1fr 1fr; * / 

Deixei o plano de fundo verde abaixo da imagem para que você possa ver o tamanho total da primeira célula da grade.

Como você pode ver, a primeira coluna retém a menor largura que pode ser alcançado sem um estouro. Neste exemplo, isso será definido pela largura mínima das 4ª e 7ª células da grade, que deriva da preenchimento e tamanho da fonte propriedades, como a imagem na primeira célula poderia ser reduzido a zero sem estouro.

Se a célula da grade continha uma cadeia de texto, min-content seria igual à largura da palavra mais longa, como esse é o menor elemento que não pode ser mais reduzido sem um estouro. Aqui está um ótimo artigo de BitsOfCode, onde você pode ver como min-content e conteúdo máximo se comportar quando a célula da grade contém uma string de texto.

Usando min-content e conteúdo máximo juntos

Se nós usar min-content e conteúdo máximo juntos dentro de mínimo máximo() função obtemos uma coluna de grade que:

1. é responsivo
2. não tem nenhum estouro
3. não cresce mais do que seu elemento mais amplo

 .container grid-template-columns: minmax (conteúdo mínimo, conteúdo máximo) 1fr 1fr;  

Nós também podemos usar o min-content e conteúdo máximo palavras-chave juntamente com outros valores de comprimento dentro de mínimo máximo() função, até que a regra faça sentido. Por exemplo, minmax (25%, conteúdo máximo) ou minmax (min-content, 300px) seriam ambas as regras válidas.

auto

Finalmente, também podemos usar o auto palavra chave como um argumento do mínimo máximo() função.

Quando auto é usado como um máximo, seu valor é idêntico ao conteúdo máximo.

Quando é usado como um mínimo, seu valor é especificado pelo min-width / min-height regra, o que significa que auto às vezes é idêntico a min-content, mas nem sempre.

Em nosso exemplo anterior, min-content é igual a auto, como a largura mínima da primeira coluna de grade é sempre menor que sua altura mínima. Então, a regra de CSS de pertencimento:

 .container grid-template-columns: minmax (conteúdo mínimo, conteúdo máximo) 1fr 1fr;  

poderia ser escrito assim:

 .container grid-template-columns: minmax (automático, automático) 1fr 1fr;  

o auto palavra-chave também pode ser usado em conjunto com outras unidades estáticas e dinâmicas (pixels, unidade fr, percentagens, etc.) dentro do mínimo máximo() função, por exemplo minmax (automático, 300px) seria uma regra válida.

Você pode testar como o min-content, conteúdo máximo, e auto Palavras-chave trabalhar com o mínimo máximo() função na seguinte demonstração Codepen: