minmax()
========

Baseline Widely available
-------------------------

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

* Learn more
* See full compatibility
* Report feedback
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>` (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()> =   
  minmax( min , max )    
  
```

### Propiedades CSS

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

* grid-template-columns
* grid-template-rows
* grid-auto-columns
* grid-auto-rows
Ejemplo
-------

### CSS


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


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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Guía de Grid Layout: *Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()*
* Rejillas CSS, valores lógicos y modos de escritura (en-US)
* Video tutorial: *Presentando minmax()*

1. **CSS**
2. **Referencia CSS**
3. CSS Grid Layout
4. **Guías**
    1. Conceptos básicos del diseño con rejillas
    2. Relación a otros métodos de diseño
    3. Posicionamiento basado en líneas (en-US)
    4. Grid template areas (en-US)
    5. Diseño usando lineas con nombre (en-US)
    6. Posicionamiento automático en el diseño con rejillas
    7. Alineamiento de cajas en el diseño con rejillas
    8. Rejillas, valores lógicos y modos de escritura (en-US)
    9. CSS Grid Layout y la Accesibilidad (en-US)
    10. CSS Grid Layout y una Mejora Progresiva (en-US)
    11. Elaborando diseños comunes utilizando rejillas
5. **Propiedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns
    4. grid-auto-flow (en-US)
    5. grid-auto-rows
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap
    9. grid-column-start (en-US)
    10. grid-gap
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas
    17. grid-template-columns
    18. grid-template-rows
6. **Glosario**
    1. Rejilla
    2. Líneas de rejilla
    3. Bandas de rejilla (en-US)
    4. Celdas de rejilla (en-US)
    5. Áreas de rejilla
    6. Canaletes (en-US)
    7. Eje de rejilla (en-US)
    8. Fila
    9. Columna