Atributo grid-column de CSS

Definición y uso

La propiedad grid-column especifica el tamaño del elemento de cuadrícula y su posición en el diseño de cuadrícula, y es una abreviatura de las siguientes propiedades:

Vea también:

Tutorial CSS:Diseño de cuadrícula CSS

Ejemplo

Ejemplo 1

Hacer que "item1" comience en la columna 1 y abarque dos columnas:

.item1 {
  grid-column: 1 / span 2;
}

Pruebe usted mismo

Ejemplo 2

Puede usar valores de línea de columna en lugar del número de columnas que desea cruzar:

.item1 {
  grid-column: 1 / 3;
}

Pruebe usted mismo

Sintaxis de CSS

grid-column: grid-column-start / grid-column-end;

Valor del atributo

Valor Descripción
grid-column-start Especifica desde qué columna comenzar a mostrar el elemento.
grid-column-end Especifica en qué línea de columna (column-line) detener la visualización del elemento, o cuántas columnas cruzar.

Detalles técnicos

Valor predeterminado: auto / auto
Herencia: No
Producción de animación: Admite. Consulte:Propiedades relacionadas con la animación.
Versión: Módulo de Layout de Cuadrícula CSS Nivel 1
Sintaxis de JavaScript: object.style.gridColumn="2 / span 2"

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