Atributo CSS grid-template-columns

Definición y uso

El atributo grid-template-columns especifica el número de columnas (y el ancho) en el diseño de grid.

Estos valores son una lista separada por espacios, donde cada valor especifica el tamaño de la columna correspondiente. Vea:

Vea también:

Tutorial de CSSDiseño de grid CSS

Manual de referencia de CSSAtributo grid-template-rows

Manual de referencia de CSSAtributo grid-template

Ejemplo

Ejemplo 1

Cree un contenedor de网格 de cuatro columnas:

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

Pruebe usted mismo

Ejemplo 2

Cree un diseño de网格 de cuatro columnas y especifique el tamaño de cada columna:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
none Valor predeterminado. Cree columnas cuando sea necesario. Vea:
auto El tamaño de la columna depende del tamaño del contenedor y del tamaño del contenido del proyecto en la columna. Vea:
max-content Establezca el tamaño de cada columna en función del proyecto más grande en la columna. Vea:
min-content Establezca el tamaño de cada columna en función del proyecto más pequeño en la columna. Vea:
length Establezca el tamaño de las columnas utilizando valores de longitud válidos. Vea:Unidades de longitud.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: Módulo de Layout de Grid CSS Nivel 1
Sintaxis de JavaScript: object.style.gridTemplateColumns="50px 50px 50px"

Compatibilidad del navegador

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

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