Propiedad CSS grid-row

La propiedad CSS grid-row establece la posición y el tamaño de un elemento de cuadrícula dentro de las filas de una CSS grid. Es una propiedad abreviada que combina grid-row-start y grid-row-end en una sola declaración, controlando en qué línea de fila comienza el elemento y en cuál termina.

Una cuadrícula está dividida por líneas de fila horizontales numeradas desde 1 en el borde superior. grid-row indica a un elemento que debe abarcar desde una línea de inicio hasta una línea de fin. Para controlar cada borde de forma independiente, use las propiedades largas directamente:

grid-row-start — la línea donde comienza el elemento.
grid-row-end — la línea donde termina el elemento.

Por tanto, grid-row: 1 / 3 es exactamente equivalente a escribir grid-row-start: 1; grid-row-end: 3.

Valor inicial	`auto` / `auto`
Se aplica a	Elementos de cuadrícula
Heredado	No
Animable	Sí
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	`object.style.gridRow = "1 / span 2"`

Sintaxis

grid-row: <start-line> / <end-line>;

El valor antes de la barra es la línea de inicio; el valor después es la línea de fin. La línea de fin es exclusiva — el elemento ocupa pistas hasta esa línea pero sin incluirla. Puedes combinar números de línea, span y líneas con nombre:

/* Explicit line numbers */
grid-row: 2 / 4;       /* start at line 2, end at line 4 → spans rows 2 and 3 */

/* Span keyword */
grid-row: 2 / span 2;  /* start at line 2, span 2 rows */
grid-row: span 3;       /* span 3 rows from wherever auto-placement puts the item */

/* Negative line number */
grid-row: 1 / -1;      /* from first line to last line (full height) */

/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;

Cómo se cuentan las líneas de fila

Una cuadrícula con tres filas explícitas tiene cuatro líneas de fila: las líneas 1, 2, 3 y 4. Los números positivos se cuentan desde arriba; los números negativos desde abajo, por lo que -1 es siempre la última línea explícita. Esto hace que grid-row: 1 / -1 sea una forma fiable de abarcar toda la altura de la cuadrícula explícita independientemente del número de filas que tenga.

Si referencias una línea que no existe — por ejemplo grid-row: 1 / 6 en una cuadrícula de tres filas — el navegador crea filas implícitas para satisfacerla. Esas filas implícitas obtienen su tamaño de grid-auto-rows.

Ejemplo básico: colocar un elemento en una fila específica

El elemento con la clase .box se mueve a la segunda fila al establecer grid-row: 2 / 3. La primera fila queda vacía y los elementos restantes fluyen hacia las celdas con posicionamiento automático.

<!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>

Pruébalo tú mismo »

Resultado

![CSS grid-row con dos elementos](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)

Abarcar varias filas con `span`

Usar grid-row: span 2 hace que un elemento ocupe dos filas sin especificar números de línea exactos. El algoritmo de posicionamiento automático inserta el elemento donde cabe y lo extiende hacia abajo dos filas. Los elementos siguientes se desplazan a las celdas disponibles más cercanas.

<!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 span 2 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>

Pruébalo tú mismo »

Cuándo usar `grid-row`

Usa grid-row cuando un elemento deba ocupar una sección vertical específica de la cuadrícula en lugar de la única celda que le asignaría el posicionamiento automático. Casos de uso habituales:

Barra lateral o panel hero a altura completa: grid-row: 1 / -1 extiende un elemento desde la primera hasta la última línea de fila explícita.
Tarjeta destacada en una cuadrícula de tarjetas: grid-row: span 2 hace que una tarjeta sea visualmente más alta que sus vecinas.
Anclar a una línea explícita: grid-row: 2 / 4 mantiene un elemento en una posición vertical fija aunque el contenido circundante cambie.

Para controlar la posición horizontal, usa la propiedad equivalente grid-column. Para establecer ambos ejes a la vez, la abreviatura grid-area combina grid-row y grid-column en una sola declaración. Para definir cómo la cuadrícula crea filas automáticamente, consulta grid-template-rows y grid-auto-rows.

Advertencia: los números de línea cuentan las líneas entre pistas, no las pistas en sí. Una cuadrícula de tres filas tiene cuatro líneas de fila (1–4). Los números negativos cuentan desde el final: -1 es la última línea explícita, -2 es la penúltima, y así sucesivamente. Si grid-row referencia una línea más allá de la cuadrícula explícita, el navegador añade filas implícitas dimensionadas por grid-auto-rows.

Valores

Valor	Descripción
`<line>`	Un entero (positivo o negativo) que referencia una línea de fila específica de la cuadrícula.
`span <n>`	El elemento abarca `n` pistas de fila. Puede usarse como valor de inicio o de fin.
`auto`	Valor por defecto — el posicionamiento y el alcance los determina el algoritmo de posicionamiento automático (una fila).
`initial`	Restablece la propiedad a su valor inicial (`auto`).
`inherit`	Hereda el valor del elemento padre.

Práctica

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

Especifica el tamaño y la ubicación de un elemento de 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 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