CSS Grid'de Satırları Birleştirme

Grid'lerde satırlar ve sütunlar bir ızgara oluşturur. Bir öğenin ızgara hücresinde bir değil, birden fazla yer kaplamasını sağlayabilirsiniz.

Bir öğenin birden fazla satır kaplaması için, grid-row özelliği atanmalıdır. Bu özellikte, eğik çizgi ile ayrılarak, öğelerin grid'deki başlangıç ve bitiş pozisyonlarını belirten sayılar verilir.

Bu durumda öğe, birinci pozisyondan ikinci pozisyona kadar (ikinci pozisyon dahil değil) uzanacaktır. Yani 1 / 2 değeri öğenin ilk hücreyi kaplamasını sağlarken, 1 / 3 değeri öğenin ilk ve ikinci hücreyi kaplamasını sağlar (ancak üçüncü hücre dahil değildir).

Örnek

Üç alt öğeye sahip bir grid'imiz olduğunu varsayalım. İlk öğenin 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;
}

Pratik Görevler

Tüm öğeleri yerleştirin ve satır birleştirmeyi aşağıdaki örneğe göre gerçekleştirin: