grid-column-start Özelliği

grid-column-start özelliği, bir elemanın grid veya ızgara içindeki sütunlardaki başlangıç konumunu belirler. Özelliğin değeri pozitif veya negatif bir sayı olabilir. Pozitif bir sayı belirlersek, elemanın başlangıç konumu soldan sağa doğru sayılır. Negatif bir sayı belirtildiğinde eleman ters sırada konumlanır, yani sağdan sola doğru.

Sözdizimi

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

Örnek

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

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

Örnek

Şimdi grid-column-start özelliğine negatif sayılar girelim:

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

Örnek

Şimdi grid-column-end özelliğini kullanarak birinci, ikinci ve üçüncü elemanların ilk satırda konumlanmasını sağlayalım. Dördüncü eleman ise tüm ikinci satırı kaplasın:

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

Örnek

Komşu elemanların kapladığı sütunların üst üste gelmesi durumunda, sonraki her eleman bir satır aşağı kayar. Bu özelliği dikkate alarak, birinci elemanın ilk satırda, ikinci elemanın - ikinci satırda, üçüncü ve dördüncü elemanların ise - üçüncü 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 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-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Ayrıca Bakınız

grid-column-end özelliği,
bir grid öğesinin sütunlardaki bitiş konumunu belirler
grid-column özelliği,
bir grid öğesinin sütunlardaki başlangıç ve bitiş konumlarını 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