1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
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 <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)
</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><length></code>, <code><percentage></code>, <code><flex></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> < <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","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.</p>
<h3 id="Valores">Valores</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>Una medida no negativa.</dd>
<dt>{{cssxref("<percentage>")}}</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><percentage></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("<flex>")}}</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><flex></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 > div {
background-color: #8ca0ff;
padding: 5px;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><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></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>
|
