Atributo CSS grid-row

Definición y uso

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

Vea también:

Tutorial CSS:Diseño de rejilla CSS

Ejemplo

Ejemplo 1

Hacer que "item1" comience en la fila 1 y cruce dos filas:

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

Pruebe usted mismo

Ejemplo 2

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

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

Pruebe usted mismo

Sintaxis de CSS

grid-row: grid-row-start / grid-row-end;

Valor del atributo

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

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 Grid CSS Nivel 1
Sintaxis de JavaScript: object.style.gridRow="2 / span 2"

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