Dissecando a função minmax()

Uma das novidades do CSS Grid Layout

Image for post
Image for post
E aí, como esse elemento irá se comportar?

Uma novidade extremamente útil introduzida pela especificação do CSS Grid Layout, é a função minmax(). É uma função que abre portas para escrevermos um CSS mais poderoso e sucinto, nos permitindo setar valores em grid-template-columns ou grid-template-rows, que inclui um valor mínimo e máximo.

A função minmax()

A função minmax() aceita dois valores, um mínimo e um máximo:

minmax(min, max)

Se o valor máximo definido for menor que o valor mínimo, ele é ignorado, e a função retorna apenas o valor mínimo.

A função minmax() aceita 6 tipos de valores:

  • Unidades fixas
  • Unidades em porcentagem
  • Unidades flexíveis
  • max-content
  • min-content
  • auto

Vamos ver um exemplo de cada abaixo.

Unidades fixas

Provavelmente os valores mais simples que podem ser usados com minmax(). Por exemplo, esse simples grid abaixo, que contêm três colunas e uma única linha.

Image for post
Image for post
Nosso exemplo de hoje

Usando a função minmax(), nós podemos especificar que a célula amarela do nosso grid permaneça entre 100px e 200px. Assim que o viewport é redimensionado, o valor absoluto é mudado, mas sempre dentro desses dois limites.

.grid {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
Image for post
Image for post

A segunda e terceira coluna irão encolher e expandir para preencher, igualmente, o espaço restante. Mas a primeira coluna ficará sempre entre 100px e 200px.

Unidades em porcentagem

Além de unidades fixas, nós também podemos usar porcentagem com função minmax(). Vamos dizer, por exemplo, que nossa célula amarelha no nosso grid possa assumir um máximo de 50% do grid, mas não pode ficar menor que 200px.

.grid {
display: grid;
grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
Image for post
Image for post

Não importa quanto o viewport encolha, a célula amarela nunca ficará menor que 200px. Mas, quando há espaço, ele cresce até um máximo de metade do tamanho do grid.

Unidades flexíveis

As unidades flexíveis são uma nova categoria que, assim como a função minmax(), também foi introduzida pela especificação do CSS Grid Layout. Essa medida, que usa o valor fr, representa uma fração do espaço disponível no container do grid. Por exemplo, vamos dizer que nós temos um grid de 100px de tamanho, com duas colunas. Uma coluna tem um comprimento fixo de 20px e a outra coluna um comprimento de 1fr. A segunda coluna, efetivamente, terá 80px, pegando todo o espaço restante disponível no grid.

Atualmente, a unidade fr só pode ser usada como o valor máximo na função minmax() (isso é descrito na especificação, porém, no futuro, ela pode ser aplicada para o valor mínimo também).

Voltando para nosso exemplo, nós podemos especificar nossa célula amarelha, para ter um mínimo de 200px. Se redimensionarmos a viewport para um tamanho maior que isso, nós queremos que ela ocupe 1fr, correspondendo ao mesmo tamanho das outras colunas.

.grid {
display: grid;
grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
Image for post
Image for post

Como todas as colunas recebem 1fr em um viewport maior, elas ocupam um espaço igualitário no grid.

max-content

A palavra chave max-content é um valor especial que representa “o tamanho ideal” para as células do grid. Ele representa o menor valor possível, que uma célula pode receber, para encaixar seu conteúdo corretamente.

Por exemplo, se o conteúdo da célula for uma sentença, o ideal é que o tamanho da célula ocupe o tamanho total da sentança, independente da sua largura e sem quebra de linhas.

Usando nosso exemplo anterior, vamos especificar a nossa célula amarela, o valor mínimo e máximo de max-content.

.grid {
display: grid;
grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
Image for post
Image for post

Como podemos ver, o tamanho da coluna se expande para envolver a sentança inteira. Como ambos, mínimo e máximo, estão definidos como max-content, o tamanho da coluna permanece o mesmo.

min-content

A palavra chave min-content, assim como max-content, é um valor especial. Ele representa o menor valor possível, que uma célula pode receber, que não leve a um overflow de conteúdo, a menos que, o overflow seja inevitável.

Para ilustrar as diferenças entre min-content e max-content, nós podemos usar o mesmo conteúdo anterior, mas agora, vamos usar min-content em ambos os valores.

.grid {
display: grid;
grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
Image for post
Image for post

Podemos ver que o tamanho da célula é encolhida, em ordem de ocupar o mínimo espaço horizontal possível, sem causar overflow.

auto

Finalmente, nós temos o valor auto. Ele tem diferentes significados, dependendo do contexto que é usado sendo como valor máximo ou mínimo, na função minmax().

Se usado como valor máximo, auto será equivalente ao max-content.

Se usado como mínimo, auto será a representação do maior-menor espaço possível que a célula pode ocupar. Esse “maior-menor espaço possível” é diferente do min-content, e será especificado pelos valores min-width/min-height.

Para ilustrar isso, nada melhor que um exemplo. Vamos ver o que acontece se usarmos na nossa célula amarela o valor auto para ambo os casos.

.grid {
display: grid;
grid-template-columns: minmax(auto, auto) 1fr 1fr;
}
Image for post
Image for post

Usando minmax() para design responsive sem Media Queries

Como nós vimos, existem vários casos que podemos usar minmax(), e podemos usá-lo de várias maneiras. Mas, talvez, o caso mais popular, e útil, é a capacidade de criar design responsivo sem usar nenhuma media querie.

Veja esse grid:

Image for post
Image for post

Cada coluna, tem um mínimo de 200px. Conforte redimensionamos o viewport, o número de colunas muda. Com CSS Grid e a função minmax(), podemos criar essa mágica em apenas duas linhas de CSS:

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Além da função minmax() aqui, temos outras duas partes chaves:

  • repeat() — Essa função permite especificar o mesmo valor para múltiplas colunas do grid. Ela recebe dois valores, número de vezes que queremos repetir, e o valor a ser repetido.
  • auto-fit — Essa palavra chave especial pode ser usada com repeat(), ao invés de usar um número fixo. Isso muda a forma com que as colunas são criadas, ao invés de um valor fixo, elas são encaixadas conforme a largura que cada coluna ocupa possa ser preenchida no espaço atual do grid.

Na minha opinião, a única limitação dess técnica, é que só funciona com colunas de tamanho iguais. Nós temos que usar a função repeat() com auto-fit, permitindo que o número de colunas seja flexível, baseado no espaço do grid.

Fora isso, essa técnica pode ser bem útil em algumas situações!

Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store