Propiedad CSS grid-row-start

La propiedad CSS grid-row-start establece en qué línea de fila de la cuadrícula comienza un elemento de cuadrícula. En otras palabras, especifica la línea de inicio de bloque (el borde superior en un diseño horizontal de izquierda a derecha) del área de cuadrícula del elemento. Puedes indicar un número de línea, un nombre de línea, o la palabra clave span para que el elemento se extienda por varias filas.

Esta propiedad solo tiene efecto en elementos de cuadrícula — hijos directos de un elemento cuyo display sea grid o inline-grid. En cualquier otro elemento se ignora. Es la forma extendida del lado de inicio del atajo grid-row, y se combina con grid-row-end para definir el span vertical completo. Para la colocación horizontal, consulta la propiedad equivalente grid-column-start.

Esta página cubre la sintaxis de grid-row-start, cada valor aceptado, ejemplos prácticos (números de línea y span), y los errores comunes que hay que evitar.

Valor inicial	auto
Se aplica a	Elementos de cuadrícula.
Heredable	No.
Animable	Sí. La colocación de los elementos es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.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

Con grid-row-start: auto, el recuadro 3 simplemente ocupa su lugar natural en el flujo de la cuadrícula — auto deja que el algoritmo de colocación automática de la cuadrícula decida dónde va el elemento.

Ejemplo de la propiedad grid-row-start donde el tercer recuadro comienza desde la primera fila:

Ejemplo de CSS grid-row-start en la 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 »

Establecer grid-row-start: 1 fija el recuadro 3 en la línea de fila 1 de la cuadrícula, de modo que comienza en la fila superior independientemente de su orden en el código fuente.

Ejemplo de la propiedad grid-row-start donde el cuarto recuadro comienza desde la segunda fila:

Ejemplo de CSS grid-row-start en la 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 con 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 »

Con span 2, el recuadro 3 se extiende por dos filas a partir de su línea de inicio natural, empujando los elementos siguientes hacia las celdas disponibles. Usa span cuando te importe cuántas filas debe ocupar un elemento en lugar de en qué línea exacta debe comenzar.

Ejemplo de los valores `initial` e `inherit`:

Ejemplo de CSS grid-row-start con 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 generalmente 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

Valor	Descripción	Pruébalo
auto	Ocupa una fila. La colocación exacta depende de las reglas de colocación automática de la cuadrícula. Este es el valor predeterminado de esta propiedad.	Pruébalo »
`<line>`	Especifica un número o nombre de línea donde debe comenzar el elemento.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Nota: Al combinarse con grid-row-end, asegúrate de que la línea de inicio sea anterior a la línea de fin para evitar elementos de cuadrícula superpuestos o colapsados.

Consejos y errores comunes

Los números de línea negativos se cuentan desde el final. grid-row-start: -1 hace referencia a la última línea de fila, lo que resulta útil para anclar un elemento en la parte inferior de una cuadrícula de tamaño explícito.
auto no es lo mismo que 1. auto delega la colocación al algoritmo de colocación automática de la cuadrícula, mientras que 1 siempre fija el elemento en la primera línea de fila.
Los elementos colocados explícitamente pueden dejar espacios vacíos. Fijar un elemento en una línea específica puede desplazar otros elementos y crear celdas vacías, dependiendo de grid-auto-flow.
Establece la línea de fin correspondiente para mayor claridad. Cuando controlas el inicio con grid-row-start, establecer también grid-row-end (o usar el atajo grid-row) hace que el span del elemento sea explícito y más fácil de mantener.

Compatibilidad con navegadores

grid-row-start forma parte de CSS Grid Layout y es compatible con todos los navegadores modernos: Chrome, Firefox, Safari y Edge.

Propiedades relacionadas

grid-row — atajo para grid-row-start y grid-row-end.
grid-row-end — establece la línea de fin (block-end) del elemento.
grid-column-start — el equivalente horizontal de esta propiedad.
grid-template-rows — define las filas (y las líneas con nombre) a las que hace referencia grid-row-start.

Práctica

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

Especifica el número de línea en el que comienza un elemento de cuadrículaEspecifica el número de fila donde debe comenzar una cuadrículaMarca el inicio de una cuadrícula CSSEspecifica el color de la fila de inicio en una cuadrículaEspecifica el nombre de línea de la cuadrícula donde comenzará el elemento

Sintaxis

Ejemplo de la propiedad grid-row-start:

Resultado

Ejemplo de la propiedad grid-row-start donde el tercer recuadro comienza desde la primera fila:

Ejemplo de la propiedad grid-row-start donde el cuarto recuadro comienza desde la segunda fila:

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

Ejemplo de los valores initial e inherit:

Valores

Consejos y errores comunes

Compatibilidad con navegadores

Propiedades relacionadas

Práctica

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

Ejemplo de los valores `initial` e `inherit`: