W3docs
es
Iniciar sesión

Propiedad CSS grid-row-end

The grid-row-end CSS property defines the end row of the item and the number of rows to span. See the values of grid-row-end property with examples.

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 inicialauto
Se aplica aElementos de la cuadrícula.
HeredableNo.
AnimableSí.
VersiónCSS Grid Layout Module Level 1
Sintaxis DOMobject.style.gridRowEnd = "4";

Sintaxis

Sintaxis de CSS grid-row-end

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

<!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>
Pruébalo tú mismo »

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

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

Valores

ValorDescripciónProbarlo
autoSe abarcará solo una fila. Este es el valor predeterminado de esta propiedad.Probarlo »
span nEspecifica el número de filas que se deben abarcar.Probarlo »
grid-lineEspecifica la línea de la cuadrícula donde termina el elemento.Probarlo »
initialHace que la propiedad use su valor predeterminado.
inheritHereda 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

Práctica

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