Función CSS minmax()
Funciones CSSEjemplo
Establecer el rango de ancho y alto del elemento:
#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: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Pruébalo »
Definición y uso
La función minmax() define un intervalo cerrado de rango de ancho y alto, que junto con CSSGrid Layoutse utiliza.
Versión compatible: CSS3
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que admite la función.
| Función | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
Sintaxis CSS
/* <inflexible-breadth>, <track-breadth> values */ 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) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px)
| Valor | Descripción |
|---|---|
| length | Longitud no negativa. |
| percentage | Porcentaje no negativo con respecto al tamaño en línea del contenedor de cuadrícula para las pistas de columna y al tamaño de bloque del contenedor de cuadrícula para las pistas de fila. Si el tamaño del contenedor de cuadrícula depende del tamaño de sus pistas, entonces el porcentaje debe tratarse como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de las pistas al tamaño del contenedor de cuadrícula, aumentando el tamaño final de las pistas a la cantidad mínima que pueda cumplir con ese porcentaje. |
| flex | Un tamaño no negativo con unidad fr especifica el factor de flexión de la pista. Cualquier pista cuyo tamaño se especifique con flex distribuye el espacio restante proporcionalmente según su factor de flexión. |
| max-content | Representa la longitud de la pista de la cuadrícula que se adapta a la celda con el contenido más grande. |
| min-content | Representa la longitud de la pista de la cuadrícula que se adapta a la celda con el contenido más pequeño. |
| auto | Como máximo, equivale a max-content. Como mínimo, representa el máximo de los tamaños mínimos de los elementos de cuadrícula que ocupan la pista de la cuadrícula (según lo especificado por min-width/min-height). |
Otras extensiones