Propiedad CSS grid-row-end

La propiedad CSS grid-row-end establece dónde termina un elemento de cuadrícula a lo largo del eje de bloque (fila). Puedes indicar una línea de fila donde detenerse, un span que define cuántas filas debe abarcar el elemento, o auto para que el navegador lo coloque automáticamente. Junto con grid-row-start, define los bordes de inicio y fin de bloque del área de cuadrícula del elemento.

Cómo se numeran las líneas de fila de la cuadrícula

Una cuadrícula está delimitada por líneas numeradas, no por las pistas (filas) en sí mismas. Una cuadrícula con tres filas tiene cuatro líneas horizontales: la línea 1 recorre el borde superior y la línea 4 el borde inferior.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end hace referencia a una de estas líneas:

grid-row-end: 3 hace que el elemento termine en la línea 3 — ocupa las filas 1 y 2 si comienza en la línea 1.
grid-row-end: span 2 hace que el elemento termine 2 filas después de donde empieza, independientemente del número de línea absoluto.

También puedes contar desde el final con números negativos: -1 es la última línea (el borde inferior), -2 es la que está encima. Así, grid-row-end: -1 siempre alcanza el borde inferior de la cuadrícula explícita sin importar cuántas filas tenga — muy útil para elementos de "altura completa".

Consejo: el valor solo describe dónde se detiene el elemento. Dónde comienza lo determina grid-row-start (o la colocación automática). La propiedad abreviada grid-row establece ambos a la vez — por ejemplo, grid-row: 1 / 3 coloca el elemento desde la línea de fila 1 hasta la línea de fila 3, abarcando dos filas.

Valor inicial	auto
Se aplica a	Elementos de cuadrícula.
Heredable	No.
Animable	Sí.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	`object.style.gridRowEnd = "4";`

Sintaxis

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Ejemplo: valor de número de línea

El valor predeterminado auto hace que un elemento ocupe una sola fila. Al establecer grid-row-end: 3 en un elemento que comienza en la línea 1 (el valor predeterminado), este abarca las dos primeras filas — el borde inferior del elemento cae sobre la línea 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end 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>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![CSS grid-row-end con múltiples elementos](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

El elemento 1 termina en la línea de cuadrícula 3, por lo que se extiende a lo largo de las dos primeras filas mientras los demás elementos fluyen a su alrededor. En el siguiente ejemplo, se logra el mismo efecto usando la palabra clave span en lugar de un número de línea fijo.

Ejemplo: valor span

Usar span es útil cuando lo que importa es cuántas filas abarca un elemento en lugar de la línea exacta donde termina. grid-row-end: span 3 significa que el elemento se extiende tres filas hacia abajo desde donde comienza.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Con grid-row-end: span 3, el elemento 2 mantiene su línea de inicio automática y se extiende tres filas hacia abajo, independientemente de en qué línea absoluta quede.

Valores

Valor	Descripción
`auto`	El elemento abarca una sola fila (colocación automática). Este es el valor predeterminado.
`span n`	El elemento termina `n` filas después de su línea de inicio.
`<integer>`	Un número de línea de fila positivo o negativo donde debe terminar el elemento. Los enteros negativos cuentan desde el final de la cuadrícula (`-1` = última línea).
`initial`	Establece la propiedad en su valor predeterminado (`auto`).
`inherit`	Hereda el valor del elemento padre.
`unset`	Elimina el valor actual, revirtiendo al valor heredado o inicial.

Errores comunes

span es relativo; los números de línea son absolutos. grid-row-end: 3 siempre se detiene en la línea 3; grid-row-end: span 3 se detiene tres filas después de la línea de inicio. Confundirlos es el error de posicionamiento en cuadrículas más frecuente.
¿El fin antes que el inicio? El navegador los intercambia. Si grid-row-end se resuelve a una línea anterior a grid-row-start, el navegador intercambia ambos valores automáticamente para que el área siga siendo válida.
Establecer solo grid-row-end no mueve el inicio. La línea de inicio sigue colocándose automáticamente. Para fijar ambos bordes, usa la propiedad abreviada grid-row (grid-row: 1 / 3) o también establece grid-row-start.
Los valores negativos solo alcanzan la cuadrícula explícita. -1 apunta a la línea final de la cuadrícula definida por grid-template-rows; no se extiende a las filas creadas implícitamente.
El width/height explícito generalmente no es necesario. El diseño de cuadrícula dimensiona los elementos automáticamente dentro de las celdas asignadas.

Propiedades relacionadas

grid-row-start — la línea donde el elemento comienza en el eje de fila.
grid-row — propiedad abreviada que establece tanto la línea de inicio como la de fin de fila a la vez.
grid-column-end — el equivalente de esta propiedad en el eje de columna.
grid-template-rows — define las pistas de fila y las líneas entre ellas.
grid-area — establece las cuatro líneas de posicionamiento (row-start, column-start, row-end, column-end) en una sola declaración.
grid-auto-rows — controla el tamaño de las pistas de fila creadas implícitamente cuando los elementos desbordan la cuadrícula explícita.

Práctica

¿Qué hace la propiedad CSS 'grid-row-end'?

Define la línea donde el lado final de un elemento de cuadrícula termina horizontalmente.Define la línea donde el lado final de un elemento de cuadrícula termina verticalmente.Alinea los elementos dentro de la cuadrícula verticalmente.Controla el espacio entre dos filas de la cuadrícula.