Grid-auto-columnas | Trucos CSS - Trucos CSS

Los grid-auto-columns La propiedad CSS es parte de la Especificación de diseño de cuadrícula CSSespecificando el tamaño de las columnas de cuadrícula que se crean sin tener un tamaño explícito. En otras palabras, esta propiedad establece el tamaño de las columnas implícitas y todas las demás columnas que no se han dimensionado explícitamente en grid-template-columns Propiedad.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail";
  grid-template-columns: 200px 400px;
  grid-auto-columns: 150px;
}

Este ejemplo crea un contenedor de cuadrícula con tres columnas definidas por grid-template-areasLas dos primeras columnas tienen un tamaño explícito establecido por grid-template-columnspero no la última columna. aquí es donde grid-auto-columns ingresa y establece el tamaño de esta columna para 150px.

grid-auto-columns casos de uso

Como dijimos arriba, grid-auto-columns establece el tamaño de todas las columnas que no tienen un tamaño explícito. Ahora la pregunta es, ¿qué columnas no tienen un tamaño explícito? ¿O cómo crea la cuadrícula columnas sin un tamaño explícito?

Aquí hay algunas situaciones en las que esto puede suceder.

Columnas definidas por grid-template-areas que no tienen un tamaño explícito establecido por grid-template-columns

El primer caso es el que vimos al principio de este artículo. Una cuadrícula puede tener una columna explícita definida por grid-template-areas sin que su tamaño sea establecido explícitamente por grid-template-columns Propiedad.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"; /* 3 columns */
  grid-template-columns: 200px 150px; /* 2 sizes */
}

La primera columna se establece en 200px y el segundo tiene un tamaño fijo de 150pxY dado que la última columna no tiene un tamaño explícito, se establecerá en auto y ocupar el espacio disponible que dejan las otras dos columnas.

Si sumamos y grid-auto-columns al ejemplo anterior también podemos controlar el tamaño de la última columna:

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail";
  grid-template-columns: 200px 150px;
  grid-auto-columns: 150px;
}

Ahora, como puede ver en la siguiente imagen, el tamaño de la última columna se establece en 150px:

Tenga en cuenta que las canciones que no tienen una medida clara son auto-Talla.

Las columnas implícitas se crean cuando hay más elementos de cuadrícula que celdas

Una red definida por grid-template-columns, grid-template-rows o y grid-template-areas se llama un red transparentelo que significa que todas las rutas de cuadrícula tienen un tamaño establecido. Digamos, por ejemplo, que tenemos 12 elementos HTML secundarios en un contenedor de cuadrícula principal, y definimos explícitamente tres columnas y cuatro filas en la cuadrícula.

.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(3, auto);
}

Tenemos cuadrículas implícitas para estas columnas y filas porque no hay información de tamaño. Solo el número de columnas y el número de filas.

Una situación en la que encontrará columnas implícitas es cuando hay más elementos de cuadrícula que columnas definidas. Imagine en nuestro último ejemplo que ahora tenemos más de 12 elementos HTML. Anteriormente, establecimos tres columnas y cuatro filas, por lo que hay exactamente 12 celdas en la cuadrícula, la cantidad perfecta para nuestros 12 elementos. Pero con más de 12 elementos, de repente tenemos un problema de desbordamiento, ¿no?

¡De nada! CSS Grid algoritmo de colocación automática crea filas o columnas adicionales para almacenar los elementos adicionales. Estas columnas y filas adicionales se denominan rastros implícitos.

De forma predeterminada, el algoritmo de inserción automática crea trazos de línea para contener elementos adicionales. En el siguiente ejemplo, queremos que nuestra cuadrícula coloque los elementos adicionales en columnas (no en filas), por lo que debemos configurar el algoritmo para colocar automáticamente columnGenial, ahora nuestra rejilla es capaz de contener cualquier cosa, sin importar cuántos objetos le arrojemos.

Sin embargo, el tamaño de las columnas implícitas se ajusta automáticamente en función del espacio restante. es por eso grid-auto-columns es muy útil: podemos dar un tamaño a todas estas columnas y la cuadrícula CSS dejará de llenar columnas cuando llegue al último elemento, incluso si la última columna en la última fila de la cuadrícula no alcanza el ancho completo de la cuadrícula,

Digamos que dimensionamos estas columnas de cuadrícula implícitas para 250px:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: column; /* Set the auto-placement algorithm to column */
  grid-auto-columns: 250px;
}

Ahora, no importa cuántas columnas implícitas se creen, todas tendrán un tamaño establecido 250px.

Las columnas implícitas se crean cuando colocamos un elemento fuera de la cuadrícula explícita

Otro escenario donde grid-auto-columns La propiedad es útil cuando se crean trazas implícitas cuando colocamos un elemento fuera de la cuadrícula explícita. Los rastros implícitos se crean automáticamente para dejar espacio para este elemento.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
  grid-auto-columns: 150px; /* Size of the implicit columns */
}

.grid-item:last-child {
  grid-column: 5; /* Placed in 5th column in a 3-column grid */
  grid-row: 3;
}

Entonces, lo que hicimos allí se configuró al final .grid-item niño en la quinta columna... ¡pero no hay una quinta columna en nuestra cuadrícula de tres columnas! Esto coloca el último elemento de la cuadrícula fuera de la cuadrícula explícita, lo que crea dos seguimientos de columna implícitos. Aunque estas columnas se crean para nosotros, podemos configurarlas para 150px usando grid-auto-columns Propiedad.

Sintaxis

grid-auto-columns: <track-size>+

where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where
<length-percentage> = <length> | <percentage>

• Valor inicial: auto
• Se refiere a: contenedores de red
• Heredado: no
• Valor calculado: como se especifica, pero con longitudes relativas convertidas a longitudes absolutas
• Porcentajes: se refiere a la dimensión correspondiente del área de contenido
• Tipo de animación: si las longitudes de la lista coinciden, por tipo valor calculado para el elemento c lista de pistas estimada; discreto por lo demás

Múltiples tamaños de pista

Podemos establecer múltiples tamaños de columna para cuadrículas usando el grid-auto-columns En este caso, el tamaño de varias pistas funciona como un patrón y se repite según sea necesario.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-auto-columns: 50px 100px 200px;
}

.grid-item:last-child {
  grid-column: 8;
}

Aquí movemos el último elemento secundario de nuestra cuadrícula fuera de las columnas explícitas y nuestra cuadrícula crea columnas implícitas para contener ese elemento como resultado. Esta cuadrícula tiene dos columnas explícitas (150px 150px) y como el último elemento quiere estar en la octava columna (grid-column: 8), seis columnas implícitas se generan automáticamente en la cuadrícula.

los grid-auto-columns establece el tamaño de la primera columna implícita en 50pxel segundo a 100px y una tercera columna para 200pxComo tenemos más de tres columnas implícitas, nuestra cuadrícula repite este patrón para dimensionarlas.

Si tuviéramos una columna implícita más, ¿cuál sería el tamaño de esa columna?

Valores

los grid-auto-columns los valores son casi los mismos que los valores de grid-template-columns propiedad, excepto en grid-auto-columns no puede usar los siguientes valores:

• none
• [linename]
• repeat()
• subgrid
• masonry

/* Keyword values */
grid-auto-columns: auto;
grid-auto-columns: min-content;
grid-auto-columns: max-content;

/* single track-size values */
grid-auto-columns: 200px;
grid-auto-columns: 30vmin;
grid-auto-columns: 50%;
grid-auto-columns: 1.5fr;
grid-auto-columns: minmax(100px, 2fr);
grid-auto-columns: minmax(min-content, 1fr);
grid-auto-columns: fit-content(15rem);

/* multiple track-size values */
grid-auto-columns: 100px 1fr;
grid-auto-columns: 200px min-content 1fr;
grid-auto-columns: 100px 200px 50px 10%;
grid-auto-columns: minmax(100px, auto) auto max-content fit-content(200px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial; /* same as `auto` */
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;

<length>

Este valor puede ser cualquier longitud de CSS no negativa válida, como px, em y rem por cierto para especificar el tamaño de la pista (es decir, el ancho) de la columna.

<percentage>

Este es un valor no negativo relativo al tamaño integrado interno del contenedor de red. Si el tamaño del contenedor de red depende del tamaño de sus pistas, entonces el porcentaje debe tratarse de la misma manera que la declaración. auto.

Una desventaja de usar un valor de porcentaje es que si agrega espacios entre pistas, el tamaño de los espacios se agregará al tamaño de las pistas, lo que puede causar un desbordamiento. fr unidad o auto palabra clave para dimensionar las pistas y evitar que esto suceda.

<flex>

Es un valor no negativo expresado en fr unidades y le permite crear cuadrículas flexibles configurando el tamaño de la pista como parte de espacio libre en el contenedor de la cuadrícula De esta manera, cuando la cuadrícula cambia de ancho, también lo hacen las columnas, lo que hace que la cuadrícula responda mejor.

Por ejemplo, considere un contenedor de red que es 900px de ancho y tiene tres columnas implícitas. Digamos que el ancho de la primera columna implícita (izquierda) es fijo (es decir, no cambia) en 300px mientras que la segunda columna ocupa una unidad fraccionaria (1fr), y la tercera columna pesa dos unidades fraccionarias (2fr):

.grid-container {
  display: grid;
  width: 900px;
  grid-auto-columns: 300px 1fr 2fr;
}

Las segundas dos columnas son fraccionarias, por lo que ocuparán el espacio disponible restante. Y en este caso, el espacio disponible es todo lo que queda después de arreglar la primera columna 300px se tiene en cuenta el ancho.Luego, las dos segundas columnas dividen lo que queda de acuerdo con la cantidad de fracciones que obtienen.

En este ejemplo, el espacio restante y disponible es 600px (es decir 900px menos 300px). Las segundas columnas obtienen una fracción (1fr) de este espacio y obtiene la tercera columna dos fracciones (2fr). Hagamos un poco de matemáticas por un momento para encontrar el ancho de una sección de 600px:

1fr = ([Grid Container Width] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

¡Ajá! es una fracción 200pxY como la segunda columna es 1frtiene que ser 200px así como Esto nos deja con 400px del espacio disponible (p. ej. 900px – 300px – 200px), lo cual sucede dos veces el tamaño de la segunda columna es el doble del tamaño de la segunda columna 2fr (1fr(2))!

minmax(min, max)

los minmax() La función toma dos argumentos: un valor de longitud mínima y un valor de longitud máxima. Y lo que le dice a un contenedor de red es que grid-auto-columns podría ser no más estrecho del valor mínimo, pero no más amplio del valor máximo. Nuestra Guía de funciones CSS tiene una explicación más profunda y detallada de cómo funciona la función.

Tome el siguiente ejemplo:

grid-auto-columns: 200px minmax(100px, 400px);

Aquí hay dos columnas: una es 200px de ancho y otra que se expresa como minmax(100px, 400px)Parece raro, ¿no? Pero todo lo que dice es que la segunda columna deber tomar al menos 100px espacio, pero no más de dos partes del espacio disponible después de las primeras columnas 200px es tomado en cuenta.

En palabras más sencillas: mientras haya más de 100px del espacio disponible, entonces la segunda columna se puede doblar para 400px pero tengo que detenerme ahí. De lo contrario, la columna es 100px amplio.

los min y max argumentos toman todos los siguientes valores excepto min El valor no puede ser un valor flexible (p. ej. 1fr):

<length-percentage> | <flex> | min-content | max-content | auto

Entonces esto no es válido ya que min valor es un valor flexible:

grid-auto-columns: minmax(1fr, 500px) 3fr;

Pero estos son perfectamente válidos:

grid-auto-columns: minmax(auto, 1fr) 3fr;
grid-auto-columns: minmax(200%, 1fr) 1fr;

auto

los auto palabra clave se comporta de manera similar a minmax(min-content, max-content) en la mayoría de los casos.

De auto las dimensiones de la pista se pueden estirar desde align-content y justify-content propiedades, ocuparán el espacio restante en el contenedor de red predeterminado (ya sabe, autoeso dijo auto los tamaños de pista no pueden ganar una batalla contra fr unidades al asignar el espacio restante, se ajustan al tamaño máximo de su contenido.

Eche un vistazo a la salida de estas dos canciones de muestra:

grid-auto-columns: auto auto auto;
grid-auto-columns: auto 1fr auto;

Cuando las tres columnas se establecen en auto (que también podríamos escribir como repeat(3, auto) — pero hablaremos de eso más adelante), todo lo que hacen es compartir el mismo espacio. Pero cuando colocamos una unidad fraccionaria en el medio como la segunda columna, auto las columnas son tan anchas como su contenido y 1fr la columna ocupa el espacio restante.

min-content

los min-content la palabra clave representa pequeñísimo el posible espacio que un elemento puede ocupar en un contenedor de red sin desbordar su contenido. El contenido puede ser textos, imágenes o videos.

Digamos que el contenido es "CSS es impresionante". min-content es el ancho del mundo "grande" porque es la parte más ancha del contenido (más ancho que "css" y "e" combinados). Si la columna se vuelve más estrecha, entonces el texto comienza a desbordar el contenedor.

En código se ve así:

.grid {
  display: grid;
  grid-auto-columns: min-content 1fr;
  gap: 1rem;
}

... lo que lleva a algo como esto:

max-content

los max-content la palabra clave representa el tamaño más pequeño requerido para que un elemento se ajuste a todo su contenido sin envolverse ni desbordarse. Sé que un nombre que incluye "max" hace que suene como si estuviéramos tratando con un tamaño máximo, por lo que este valor puede ser un dolor de cabeza.

Si revisamos nuestra min-content ejemplo anterior, una cuadrícula con un valor de tamaño de max-content crecerá hasta que su contenido quepa en una línea. Entonces, en el caso de "CSS es increíble" max-content ¿Cuánto espacio ocupan estas tres palabras juntas en una línea?

.grid {
  display: grid;
  grid-auto-columns: max-content 1fr;
  gap: 1rem;
}

fit-content(<length-percentage>)

los fit-content() función (hay una explicación sólida de esto en nuestra Guía de funciones CSS) usa el espacio disponible y acepta un percentage o length valor como el tamaño máximo permitido para una cuadrícula mientras se asegura de que la pista nunca se exceda max-content y nunca se contrae por encima del mínimo. El mínimo es a menudo, pero no siempre, igual a min-content.

.grid {
  display: grid;
  grid-auto-columns: fit-content(700px) fit-content(700px) 1fr;
  gap: 1rem;
}

En la siguiente figura, la primera columna no se extiende más allá max-content tamaño (es decir, el ancho de las palabras "fit-content(700px)" en una sola línea): solo se estira para ajustarse a su contenido. Sin embargo, la segunda columna tiene mucho más contenido y deja de estirarse después de convertirse en un ancho de 700pxque es la restricción establecida en la función:

Ejemplos

Vamos a crear una galería que tenga tres imágenes en tres columnas, y en caso de que se agreguen más imágenes, queremos que caigan en cascada a una nueva fila y columna. Para hacer esto, necesitamos crear tres columnas explícitas y colocar los elementos adicionales fuera de estas tres columnas, porque esto puede conducir a columnas implícitas e, hipotéticamente, no sabemos cuántas columnas se generarán, podemos controlar el tamaño de estas columnas implícitas, usando grid-auto-columns Propiedad.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-columns: minmax(100px, 200px);
  gap: 1rem;
}

Especificaciones

Módulo de diseño de cuadrícula CSS 1 (Recomendación del candidato)

Compatibilidad con navegador

Más información

Conectado