Propiedad CSS grid-row-end

La propiedad grid-row-end se utiliza para especificar en qué fila dejar de mostrar el elemento o cuántas filas abarcará el elemento.

Nota: Establecer explícitamente width o height en los elementos de la cuadrícula generalmente no es necesario, ya que el diseño de cuadrícula maneja el tamaño automáticamente.

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

Sintaxis

Sintaxis de CSS grid-row-end

css

grid-row-end: auto | grid-line | span n | inherit | initial | unset;

Ejemplo de la propiedad grid-row-end:

Ejemplo de código CSS grid-row-end

html

<!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: auto;
      }
    </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>

Try it Yourself »

Resultado

CSS grid-row-end with multiple items

Aquí, hemos especificado la propiedad grid-row-end como "auto". En el siguiente ejemplo, se abarcan tres filas.

Ejemplo de la propiedad grid-row-end especificada como "span 3":

Ejemplo de CSS grid-row-end con múltiples elementos

html

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

Try it Yourself »

Valores

Valor	Descripción	Probarlo
auto	Se abarcará solo una fila. Este es el valor predeterminado de esta propiedad.	Probarlo »
span n	Especifica el número de filas que se deben abarcar.	Probarlo »
grid-line	Especifica la línea de la cuadrícula donde termina el elemento.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Para mayor comodidad, también puede usar la propiedad abreviada grid-row para establecer ambas líneas, de inicio y fin, al mismo tiempo.

Práctica

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

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

Propiedad CSS grid-row-end ​

Sintaxis ​

Ejemplo de la propiedad grid-row-end: ​

Resultado ​

Ejemplo de la propiedad grid-row-end especificada como "span 3": ​

Valores ​