grid-row Özelliği

grid-row özelliği, bir öğenin grid veya ızgara içindeki satırlar boyunca başlangıç ve bitiş konumlarını belirler. Özelliğin değerleri, eğik çizgi ile ayrılmış pozitif veya negatif sayılar olabilir. İlk sayı öğenin başlangıç konumunu, ikinci sayı ise bitiş konumunu belirtir. Değer olarak pozitif bir sayı belirlersek, öğenin konumu yukarıdan aşağıya doğru sayılır. Negatif bir sayı belirtildiğinde, öğe ters sırada, yani aşağıdan yukarıya doğru konumlandırılır.

Sözdizimi

seçici {
	grid-row: başlangıç konumu / bitiş konumu;
}

Örnek

Grid içindeki öğelere başlangıç ve 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;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}

Örnek

Şimdi grid-row özelliğinde negatif sayılar kullanalım:

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

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: -1 / -2;
}
#elem2 {
	grid-row: -2 / -3;
}
#elem3 {
	grid-row: -3 / -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: 1 / 3; /* iki satır */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Örnek

grid-row ve grid-column özelliklerini birleştirelim:

<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 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Örnek

Şimdi ise, birinci ve beşinci blokların tüm satırı kaplamasını, ikinci bloğun iki satır ve iki sütun kaplamasını, üçüncü ve dördüncü blokların ise bir satır ve iki sütun kaplamasını sağlayalı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 id="elem5">5</div>
</div>

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

Ayrıca Bakınız

grid-column özelliği,
bir grid öğesinin sütunlar boyunca başlangıç ve bitiş konumlarını belirler
grid-row-start özelliği,
bir grid öğesinin satırlar boyunca başlangıç konumunu belirler
grid-row-end özelliği,
bir grid öğesinin satırlar boyunca bitiş konumunu belirler