This page was translated from English by the community. Learn more and join the MDN Web Docs community.

minmax()

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.

/* 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> (en-US) 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 (en-US) 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> (en-US)
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( [ (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) auto ] (en-US) , [ (en-US) <length> | (en-US) <percentage> | (en-US) <flex> (en-US) | (en-US) min-content | (en-US) max-content | (en-US) auto ] (en-US) )

Propiedades CSS

La función minmax() puede ser usada dentro de: 

Ejemplo

CSS

#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

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

Resultado

Especificaciones

Especificación Estado Comentario
CSS Grid Layout
La definición de 'minmax()' en esta especificación.		 Candidate Recommendation Definición inicial

Compatibilidad de navegadores

BCD tables only load in the browser

Mira también