Propiedad CSS grid-auto-columns

La propiedad grid-auto-columns establece el tamaño de las columnas de cuadrícula creadas implícitamente, es decir, las columnas que el navegador genera automáticamente cuando los elementos de la cuadrícula se colocan fuera de las columnas que definiste explícitamente con grid-template-columns.

Por qué es importante: Cuando construyes una cuadrícula, normalmente declaras un número fijo de pistas. Pero si un elemento cae en una columna que aún no existe (por ejemplo, colocas un elemento en grid-column: 5 en una cuadrícula de 3 columnas), CSS Grid crea esa columna adicional sobre la marcha. Por defecto, esas columnas generadas automáticamente tienen tamaño auto, lo que a menudo las colapsa para ajustarse al contenido. grid-auto-columns te permite controlar el ancho que deben tener.

Nota: Esta propiedad solo afecta a las columnas creadas implícitamente, no a las definidas explícitamente. Para dimensionar las columnas que declaras de antemano, usa grid-template-columns. El equivalente para filas es grid-auto-rows.

¿Cuándo se crean columnas implícitas?

Las columnas implícitas aparecen en dos situaciones comunes:

Un elemento se posiciona más allá de la última línea de columna explícita (p. ej., grid-column-start: 4 cuando solo se definen 3 columnas).
La cuadrícula usa grid-auto-flow: column, por lo que los nuevos elementos fluyen hacia columnas recién creadas en lugar de filas.

En ambos casos, las nuevas columnas heredan su ancho de grid-auto-columns.

Valor inicial	auto
Se aplica a	Contenedores de cuadrícula.
Heredado	No.
Animatable	Sí. El tamaño de las columnas es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridAutoColumns = "100px";

Sintaxis

Sintaxis de la propiedad CSS grid-auto-columns

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Ejemplo de grid-auto-columns:

Ejemplo de la propiedad CSS grid-auto-columns con los valores auto y length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el siguiente ejemplo, la propiedad grid-auto-columns se usa para establecer un tamaño predeterminado (ancho) para todas las columnas.

Ejemplo de grid-auto-columns con todos los valores:

Ejemplo de la propiedad CSS grid-auto-columns con los valores max-content, min-content, auto y length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
auto	El tamaño de las columnas está determinado por el contenido o el espacio disponible. Este es el valor predeterminado de la propiedad.
max-content	El tamaño de cada columna está determinado por la mayor contribución de min-content de sus elementos.
min-content	El tamaño de cada columna está determinado por la menor contribución de min-content de sus elementos.
minmax(min, max)	El rango de tamaño es mayor o igual a "min" y menor o igual a "max".
length	El tamaño de las columnas se especifica mediante un valor de longitud.
%	El tamaño de las columnas se especifica en porcentajes.

También puedes pasar una lista de tamaños separados por espacios (por ejemplo, grid-auto-columns: 100px 200px). La lista se repite en orden para cada nueva columna implícita.

Propiedades relacionadas

grid-auto-rows — la misma idea para las filas creadas implícitamente.
grid-auto-flow — controla si los elementos colocados automáticamente crean nuevas filas o columnas.
grid-template-columns — define las columnas explícitas.
grid — la forma abreviada que agrupa las propiedades de diseño de cuadrícula.

Práctica

¿Qué hace la propiedad 'grid-auto-columns' en CSS?

Se usa para especificar el tamaño de las columnas de cuadrícula creadas implícitamente.Se usa para cambiar el color de las columnas de la cuadrículaControla la altura de las filas de la cuadrículaFunciona junto con 'grid-template-areas' y 'grid-auto-flow' para hacer referencia a las columnas de la cuadrícula.