Atributo grid-auto-columns de CSS

Definición y uso

El atributo grid-auto-columns establece el tamaño de las columnas en el contenedor de cuadrícula.

Esta propiedad solo afecta las columnas que no tienen tamaño establecido.

Vea también:

Tutorial de CSS:Diseño de cuadrícula CSS

Manual de referencia de CSS:Atributo grid-auto-rows

Ejemplo

Establezca el tamaño predeterminado de las columnas en la cuadrícula:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Pruebe usted mismo

Sintaxis de CSS

grid-auto-columns: auto|max-content|min-content|length;

Valor del atributo

Valor Descripción
auto Valor predeterminado. El tamaño de las columnas se determina por el tamaño del contenedor.
fit-content()
max-content Establezca el tamaño de cada columna en función del elemento más grande en la columna.
min-content Establezca el tamaño de cada columna en función del elemento más pequeño en la columna.
minmax(min.max) Establezca un rango de tamaños entre min y max.
length Establezca el tamaño de las columnas utilizando valores de longitud válidos. VeaUnidad de longitud.
% Establezca el tamaño de las columnas utilizando porcentajes.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: Admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de diseño de cuadrícula CSS Grid Level 1
Sintaxis de JavaScript: object.style.gridAutoColumns="120px"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44