grid-row-start Özelliği

grid-row-start özelliği, bir grid elemanının satırlar boyunca başlangıç konumunu belirler. Özelliğin değeri pozitif veya negatif bir sayı olabilir. Pozitif bir sayı belirlenirse, elemanın başlangıç konumu yukarıdan aşağıya doğru sayılır. Negatif bir sayı belirtilirse, eleman ters sırada konumlanır, yani aşağıdan yukarıya doğru.

Sözdizimi

seçici {
	grid-row-start: pozitif veya negatif sayı;
}

Örnek

Grid içindeki elemanlara başlangıç konumları verelim:

<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;
}

Örnek

Şimdi grid-row-start özelliğine negatif sayılar girelim. Artık elem3 en üst satırı, elem1 ise en alt satırı kaplayacak:

<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;
}

Örnek

İlk bloğun iki satır kaplamasını sağlayalım. Bunun için grid-row-start ve grid-row-end özelliklerini birlikte kullanmamız gerekecek:

<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;
}

Örnek

Şimdi dördüncü bloğa üç satır atayalım:

<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;
}

Ayrıca Bakınız

grid-row-end özelliği,
bir grid elemanının satır bazında bitiş konumunu belirler
grid-row özelliği,
bir grid elemanının satır bazında başlangıç ve bitiş konumlarını belirler
grid-template-rows özelliği,
grid'deki satırların sayısını ve yüksekliğini belirler
grid-auto-rows özelliği,
örtük grid'deki satırların sayısını ve yüksekliğini belirler