Atributo CSS grid-column-end

Definición y uso

El atributo grid-column-end define cuántas columnas cruzará el elemento o en qué línea de columna (column-line) finalizará el elemento.

Consulte los ejemplos al final de la página.

Vea también:

Tutorial CSS:Diseño de cuadrícula CSS

Ejemplo

Ejemplo 1

Hacer que "item1" cruce tres columnas:

.item1 {
  grid-column-end: span 3;
}

Pruebe usted mismo

Ejemplo 2

Puede usar el valor de la línea de columna en lugar del número de columnas que cruzará:

.item1 {
  grid-column-end: 3;
}

Pruebe usted mismo

Sintaxis de CSS

grid-column-end: auto|span n|column-line;

Valor del atributo

Valor Descripción
auto Valor predeterminado. El elemento cruzará una columna.
span n Define el número de columnas que cruzará el elemento.
column-line Define en qué columna se detiene la visualización del elemento.

Detalles técnicos

Valor predeterminado: 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.gridColumnEnd="5"

Compatibilidad del navegador

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

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