From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/grid-auto-columns/index.html | 209 ++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/es/web/css/grid-auto-columns/index.html (limited to 'files/es/web/css/grid-auto-columns/index.html') diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..18d241f7b6 --- /dev/null +++ b/files/es/web/css/grid-auto-columns/index.html @@ -0,0 +1,209 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - CSS Grid + - Experimental + - Propiedades CSS + - Referencia +translation_of: Web/CSS/grid-auto-columns +--- +

La propiedad de css grid-auto-columns   especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
+ + + +

Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para  {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.

+ +

Sintaxis

+ +
/* Keyword values */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* <length> values */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* <percentage> values */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* <flex> values */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* minmax() values */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* fit-content() values */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+
+ +

Values

+ +
+
<length>
+
Es una longitud no negativa.
+
<percentage>
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático.
+
<flex>
+
Es una dimensión -valor- no negativa con la unidad fr especificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como <flex> tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factor fr-.
+
Si aparece en una función minmax() implica un mínimo automático (ejemplo: minmax(auto, <flex>)).
+
max-content
+
Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla.
+
min-content
+
Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla.
+
minmax(min, max)
+
Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a min y menor que o igual a max. Si max es menor que min, entonces max será ignorado y la función será tratada como un min. Si establecemos un valor máximo como <flex>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como <flex>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).
+
fit-content(argument)
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula similar a auto (por ejemplo: minmax(auto, max-content)), excepto que el track size o espacio entre celdas es mayor que el auto mínimo.
+
auto
+
Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.
+
+

Note: Los valores de tamaño auto  (y solo los auto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .

+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Contenido CSS 

+ +
#grid {
+  height: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Example", "410px", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilidad con Navegadores

+ + + +

Vea también

+ + + + -- cgit v1.2.3-54-g00ecf