W3docs
es
Iniciar sesión

Propiedad CSS grid-row-start

Use the grid-row-start property to specify on which row to start displaying the item. See property description, values and examples.

La propiedad CSS grid-row-start define el inicio del elemento dentro de la fila de la cuadrícula, añadiendo un span, una línea o nada a su posición en la cuadrícula, y especifica la línea block-start del área de cuadrícula del elemento. Esta propiedad forma parte de la propiedad abreviada grid-row.

Valor inicialauto
Se aplica aElementos de la cuadrícula.
HeredableNo.
AnimatableSí. La colocación de los elementos es animable.
VersiónCSS Grid Layout Module Level 1
Sintaxis DOMobject.style.gridRowStart = "5";

Sintaxis

Sintaxis de CSS grid-row-start

grid-row-start: auto | <line> | span <number> | initial | inherit;

Nota: <line> es un marcador de posición para un número de línea o un nombre de línea personalizado.

Ejemplo de la propiedad grid-row-start:

Ejemplo de código CSS grid-row-start

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

Resultado

CSS grid-row-start primera fila

Ejemplo de la propiedad grid-row-start, donde la tercera caja comienza desde la primera fila:

Ejemplo de CSS grid-row-start primera fila

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

Ejemplo de la propiedad grid-row-start, donde la cuarta caja comienza desde la segunda fila:

Ejemplo de CSS grid-row-start segunda fila

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box {
        grid-row-start: 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-start 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>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad grid-row-start con la palabra clave span:

Ejemplo de CSS grid-row-start span

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

Resultado

CSS grid-row-start ejemplo span

Ejemplo de los valores initial e inherit:

Ejemplo de CSS grid-row-start initial/inherit

.box-initial {
  grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
  grid-row-start: inherit; /* Inherits the value from the parent grid item */
}

Nota: initial se utiliza normalmente para restablecer la propiedad a su comportamiento predeterminado, mientras que inherit es útil cuando un elemento hijo de la cuadrícula necesita coincidir con el comportamiento de colocación de su elemento padre.

Valores

ValorDescripciónProbarlo
autoOcupa una fila. La colocación exacta depende de las reglas de auto-colocación de la cuadrícula. Este es el valor predeterminado de esta propiedad.Probarlo »
<line>Especifica un número o nombre de línea donde debe comenzar el elemento.Probarlo »
initialHace que la propiedad utilice su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Nota: Cuando se combina con grid-row-end, asegúrese de que la línea de inicio esté antes de la línea de finalización para evitar que los elementos de la cuadrícula se superpongan o se colapsen.

Práctica

Práctica

¿Qué especifica la propiedad grid-row-start en CSS?