minmax()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

css

/* valores <ancho no-flexible>, <ancho de la banda> */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* valores <ancho fijo>, <ancho de la banda> */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* valores <ancho no-flexible>, <ancho fijo> */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

Sintáxis

Una función que toma dos parámetros, min y max.

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor <flex> establece el factor flex de una banda; no es válido como un mínimo.

Valores

<length>: Una medida no negativa.
<percentage>: Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El user agent puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
<flex>: Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
max-content: Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
min-content: Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
auto: Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en min-width/min-height) de los elementos de rejilla que ocupan la banda.

Sintáxis formal

<minmax()> = 
  minmax( min , max )

#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

html

<div id="container">
  <div>
    Elemento tan ancho como el contenido,<br />
    pero de máximo 300 píxeles.
  </div>
  <div>Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.</div>
  <div>Elemento inflexible de 150 píxeles de ancho.</div>
</div>