path: root/files/es/web/css/minmax()/index.html

---
title: minmax()
slug: Web/CSS/minmax()
tags:
  - CSS
  - CSS Grid
  - Diseño
  - Función CSS
  - Referencia
  - Rejilla CSS
  - Web
translation_of: Web/CSS/minmax()
---
<p>La función <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href="/en-US/docs/Web/CSS">en CSS</a> define un rango de tamaño mayor o igual que <var>min</var> y menor o igual que <var>max</var>. Se emplea con <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">rejillas CSS</a>.</p>

<pre class="brush: css no-line-numbers notranslate">/* valores &lt;ancho no-flexible&gt;, &lt;ancho de la banda&gt; */
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 &lt;ancho fijo&gt;, &lt;ancho de la banda&gt; */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

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

<h2 id="Sintáxis">Sintáxis</h2>

<p>Una función que toma dos parámetros, <em>min</em> y <em>max</em>.</p>

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

<p>Si <var>max</var> &lt; <var>min</var>, entonces <var>max</var> es ignorado y se trata a <code>minmax(min,max)</code> como <var>min</var>. Como un máximo, un valor {{cssxref("flex_value","&lt;flex&gt;")}} establece el factor flex de una banda; no es válido como un mínimo.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Una medida no negativa.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>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 <code>&lt;percentage&gt;</code> debe ser tratado como <code>auto</code>. El {{glossary("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.</dd>
 <dt>{{cssxref("&lt;flex&gt;")}}</dt>
 <dd>Una dimension no-negativa con la unidad <code>fr</code> especificando el factor flex de la banda. Cada banda de tamaño <code>&lt;flex&gt;</code> toma una parte del espacio disponible en proporción a su factor flex.</dd>
 <dt><code>max-content</code></dt>
 <dd>Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.</dd>
 <dt><code>min-content</code></dt>
 <dd>Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.</dd>
 <dt><code>auto</code></dt>
 <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.</dd>
</dl>

<h3 id="Sintáxis_formal">Sintáxis formal</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h3 id="Propiedades_CSS">Propiedades CSS</h3>

<p>La función <code>minmax()</code> puede ser usada dentro de: </p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
 <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-rows</a></li>
 <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
 <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
</ul>

<h2 id="Ejemplo">Ejemplo</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[3] notranslate">#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 &gt; div {
  background-color: #8ca0ff;
  padding: 5px;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div id="container"&gt;
  &lt;div&gt;
    Elemento tan ancho como el contenido,&lt;br/&gt;
    pero de máximo 300 píxeles.
  &lt;/div&gt;
  &lt;div&gt;
    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
  &lt;/div&gt;
  &lt;div&gt;
    Elemento inflexible de 150 píxeles de ancho.
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Especificación</th>
   <th>Estado</th>
   <th>Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
   <td>{{Spec2("CSS Grid")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<div class="hidden">La tabla de compatibilidad en esta página se generó desde datos estructurados. Si quieres contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request..</div>

<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>

<h2 id="Mira_también">Mira también</h2>

<ul>
 <li>Guía de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()</a></em></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas CSS, valores lógicos y modos de escritura</a></li>
 <li>
  <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Presentando minmax()</a></em></p>
 </li>
</ul>

<section class="Quick_links" id="Quick_Links">
<ol>
 <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
 <li data-default-state="open"><a href="#"><strong>Guías</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del diseño con rejillas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación a otros métodos de diseño</a></li>
   <li><a href="
/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Diseño usando lineas con nombre</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en el diseño con rejillas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de cajas en el diseño con rejillas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y la Accesibilidad</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y una Mejora Progresiva</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Elaborando diseños comunes utilizando rejillas</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Glosario</strong></a>
  <ol>
   <li><a href="/en-US/docs/Glossary/Grid">Rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_lines">Líneas de rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_tracks">Bandas de rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_cell">Celdas de rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_areas">Áreas de rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Gutters">Canaletes</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_Axis">Eje de rejilla</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_rows">Fila</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_column">Columna</a></li>
  </ol>
 </li>
</ol>
</section>