Recomendação de curso:

Função minmax() do CSS

Definição e uso de CSS minmax() A função minmax() é usada no layout de grade CSS para definir um intervalo de tamanho que é maior ou igual ao valor mínimo e menor ou igual ao valor máximo.

Exemplo

Uso minmax() Defina um intervalo de tamanho para as colunas da grade:

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: verde;
  padding: 10px;
}

Experimente você mesmo

Sintaxe CSS

minmax(min, max)
Valor Descrição
min

Obrigatório. Valor mínimo.

Pode ser um comprimento, uma porcentagem, um valor elástico (fr) ou um dos seguintes termos-chave:

  • auto
  • max-content
  • min-content
max

Obrigatório. Valor máximo.

Pode ser um comprimento, uma porcentagem, um valor elástico (fr) ou um dos seguintes termos-chave:

  • auto
  • max-content
  • min-content

Detalhes técnicos

Versão: Módulo de Layout de Grade CSS Level 2

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

Páginas relacionadas

Referência:A função CSS min()

Referência:A função CSS max()

Referência:Atributo CSS grid-template-columns

Referência:Atributo CSS grid-template-rows

Referência:Atributo grid-auto-columns do CSS

Referência:Atributo grid-auto-rows do CSS