La propiedad de cssgrid-auto-columns especifíca el tamaño de una columna de cuadrícula creada implícitamentetrack.

Pruébalo

grid-auto-columns: auto;

grid-auto-columns: 1fr;

grid-auto-columns: min-content;

grid-auto-columns: minmax(10px, auto);

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div></div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-auto-rows: 40px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}#example-element > div:nth-child(1) {  grid-column: 1 / 3;}#example-element > div:nth-child(2) {  grid-column: 2;}

Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito paragrid-template-columns, implícitogridlas 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<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 unidadfr 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 factorfr-.

Si aparece en una funciónminmax() 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 amin y menor que o igual amax. Simax es menor quemin, entoncesmax será ignorado y la función será tratada como unmin. 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órmulamin(max-content, max(auto, argument)), que se calcula similar aauto (por ejemplo:minmax(auto, max-content)), excepto que eltrack 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 pormin-width/min-height) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.

Nota:Los valores de tamañoauto (y solo losauto) pueden ser estirados por las propiedadesalign-content yjustify-content .

Sintaxis Formal

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

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

<track-breadth> =
<length-percentage [0,∞]>|
<flex [0,∞]>|
min-content|
max-content|
auto

<inflexible-breadth> =
<length-percentage [0,∞]>|
min-content|
max-content|
auto

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

Ejemplo

Contenido HTML

<div>  <div></div>  <div></div>  <div></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

Especificaciones

Compatibilidad con navegadores

Vea también

• Propiedades CSS relacionadas:grid-auto-rows,grid-auto-flow,grid
• Guía de Layout tipo Grid (en inglés):Auto-placement in grid layout - sizing rows in the implicit grid
• Video tutorial (inglés):Introducing Grid auto-placement and order