[CRON] sync translated content

1 files changed, 215 insertions, 0 deletions

diff --git a/files/es/web/css/minmax/index.html b/files/es/web/css/minmax/index.html
new file mode 100644
index 0000000000..58a3701655
--- /dev/null
+++ b/files/es/web/css/minmax/index.html
@@ -0,0 +1,215 @@
+---
+title: minmax()
+slug: Web/CSS/minmax
+tags:
+  - CSS
+  - CSS Grid
+  - Diseño
+  - Función CSS
+  - Referencia
+  - Rejilla CSS
+  - Web
+translation_of: Web/CSS/minmax()
+original_slug: 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>
+
+{{csssyntax}}
+
+<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>
+
+
+
+<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 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>