grid-column özelliği

grid-column özelliği, bir öğenin grid veya ızgara içindeki sütunlardaki 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ı belirtirsek, öğenin konumu soldan sağa doğru sayılır. Negatif bir sayı belirtildiğinde, öğe ters sırada konumlanır, yani sağdan sola doğru.

Sözdizimi

seçici {
	grid-column: 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-column: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Örnek

Şimdi grid-column özelliğinde negatif sayılar belirtelim:

<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-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Örnek

Şimdi birinci, ikinci ve üçüncü öğelerin birinci sırada yer almasını, dördüncü öğenin ise tüm ikinci sırayı 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>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Örnek

Komşu öğelerin kapladığı sütunların üst üste gelmesi durumunda, sonraki her öğe bir sıra aşağı kayar. Bu özelliği kullanarak, birinci öğenin birinci sırada, ikinci öğenin ikinci sırada, üçüncü ve dördüncü öğelerin ise üçüncü sırada yer alması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>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Örnek

grid-column ve grid-row ö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 birinci ve beşinci blokların tüm sırayı kaplamasını, ikinci bloğun iki sıra ve iki sütunu kaplamasını, üçüncü ve dördüncü blokların ise bir sıra ve iki sütunu 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-row özelliği,
bir öğenin grid içindeki sıralardaki başlangıç ve bitiş konumlarını belirler
grid-column-start özelliği,
bir öğenin grid içindeki sütunlardaki başlangıç konumunu belirler
grid-column-end özelliği,
bir öğenin grid içindeki sütunlardaki bitiş konumunu belirler
grid-template-columns özelliği,
grid içindeki sütunların sayısını ve genişliğini belirler
grid-auto-columns özelliği,
örtük grid içindeki sütunların sayısını ve genişliğini belirler