Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 57
Soporte completo 57
Soporte completo 29
Deshabilitado
Deshabilitado From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 12Firefox Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Soporte completo 44
Soporte completo 44
Soporte completo 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android Sin soporte NoChrome Android ? Edge Mobile Soporte completo 12Firefox Android Soporte completo 52
Soporte completo 52
Soporte completo 40
Deshabilitado
Deshabilitado From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Soporte completo 10.3Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: jorgemontoyab
Última actualización por: jorgemontoyab,