Propiedad grid-row-start

La propiedad grid-row-start establece la posición inicial de un elemento en la cuadrícula o grid en cuanto a las filas. El valor de la propiedad puede ser un número positivo o negativo. Si asignamos un número positivo, la posición inicial del elemento se cuenta desde arriba hacia abajo. Al especificar un número negativo, el elemento se ubicará en orden inverso, es decir, de abajo hacia arriba.

Sintaxis

selector {
	grid-row-start: número positivo o negativo;
}

Ejemplo

Vamos a asignar a los elementos en la cuadrícula posiciones iniciales:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Ejemplo

Y ahora vamos a especificar números negativos en la propiedad grid-row-start. Ahora el elem3 ocupará la fila superior, y el elem1 - la fila inferior:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Ejemplo

Hagamos que el primer bloque ocupe dos filas. Para esto necesitaremos combinar las propiedades grid-row-start y grid-row-end:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

Ejemplo

Ahora asignemos al cuarto bloque tres filas:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

Véase también

la propiedad grid-row-end,
que establece la posición final de un elemento en la cuadrícula en cuanto a las filas
la propiedad grid-row,
que establece las posiciones inicial y final de un elemento en la cuadrícula en cuanto a las filas
la propiedad grid-template-rows,
que establece la cantidad y el ancho de las filas en la cuadrícula
la propiedad grid-auto-rows,
que establece la cantidad y el ancho de las filas en la cuadrícula implícita