grid-row-end özelliği

grid-row-end özelliği, bir grid öğesinin satırlar boyunca bitiş konumunu belirler. Özelliğin değeri pozitif veya negatif bir sayı olabilir. Pozitif bir sayı belirlerseniz, öğenin başlangıç konumu yukarıdan aşağıya doğru sayılır. Negatif bir sayı belirtildiğinde, öğe ters sırada konumlanır, yani aşağıdan yukarıya doğru.

Sözdizimi

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

Örnek

Grid içindeki öğelere bitiş 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;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

Örnek

İlk bloğun iki satır kaplamasını sağlayalım:

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

Örnek

Şimdi grid-row-start ve grid-row-end özelliklerinde negatif sayılar belirtelim. Artık elem3 en üstteki satırı kaplayacak, elem1 ise en alttakini 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Ayrıca bakınız

grid-row-start özelliği,
bir grid öğesinin satırlar boyunca başlangıç konumunu belirler
grid-row özelliği,
bir grid öğesinin satırlar boyunca başlangıç ve bitiş konumlarını belirler
grid-template-rows özelliği,
griddeki satırların sayısını ve genişliğini belirler
grid-auto-rows özelliği,
örtük griddeki satırların sayısını ve genişliğini belirler