Propiedad grid-row de CSS

La propiedad grid-row se utiliza para especificar en qué línea de fila debe comenzar el elemento y en cuál debe terminar. Es una propiedad abreviada (shorthand) para las siguientes propiedades:

Valor inicial	auto auto
Se aplica a	Elementos de la cuadrícula.
Heredable	No.
Animable	Sí. Los elementos son animables.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridRow = "1 / span 2";

Sintaxis

Sintaxis de CSS grid-row

css

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

Ejemplo de la propiedad grid-row:

Ejemplo de código CSS grid-row

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: 2 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS grid-row con dos elementos

Ejemplo de la propiedad grid-row especificada como span 2:

Ejemplo de CSS grid-row con dos elementos

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
grid-row-start	Especifica la posición de inicio del elemento.
grid-row-end	Especifica la posición final del elemento y el número de filas que debe abarcar.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

En CSS, ¿qué especifica la propiedad 'grid-row'?

Especifica el tamaño y la ubicación de un elemento de la cuadrícula dentro de la fila de la cuadrículaEspecifica el estilo de fuente de la cuadrículaEspecifica el tamaño y la ubicación de un elemento de la cuadrícula dentro de la columna de la cuadrículaPermite que un elemento ocupe más de una fila de la cuadrículaEspecifica el color de fondo de la cuadrícula

Propiedad grid-row de CSS ​

Sintaxis ​

Ejemplo de la propiedad grid-row: ​

Resultado ​

Ejemplo de la propiedad grid-row especificada como span 2: ​

Valores ​