CSS grid-template-columnsPropiedad

Ejemplo

Crea un contenedor de cuadrícula de 4 columnas:

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }

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

Propiedad
grid-template-columns	57	16	52	10	44

La propiedad grid-template-columns se utiliza para establecer el número de columnas y el ancho de cada columna en el diseño de cuadrícula.

Valor predeterminado:	auto
Herencia:	no
Animación:	Soportada.Leer sobreanimatable Pruébalo
Versión:	CSS Grid Layout Module Level 1
Sintaxis de JavaScript:	object.style.gridTemplateColumns="50px 50px 50px" Pruébalo

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Valor	Descripción
none	Valor predeterminado. No se especifica el tamaño de las columnas.
auto	El tamaño de las columnas está determinado por el tamaño del contenedor y el tamaño del contenido de los elementos de la cuadrícula dentro de las columnas.
max-content	El tamaño de cada columna se establece al tamaño del elemento de cuadrícula más grande en esa columna.
min-content	El tamaño de cada columna se establece al tamaño del elemento de cuadrícula más pequeño en esa columna.
length	Valor de longitud, puede ser un número en px o un porcentaje %. 0 es el valor predeterminado. Más informaciónUnidades de longitud。
initial	Establece esta propiedad a su valor predeterminado.Leer sobre initial
inherit	Hereda esta propiedad del elemento padre. Leer sobre inherit

Crea un contenedor de cuadrícula de 4 columnas y asigna un tamaño a cada columna:

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